獲取拖放jQuery的xy位置

我正在使用asp.net創建拖放web應用程序。獲取拖放jQuery的xy位置

這是我的樣品佈局：

+----------------------------------------------------+ 
|             | 
|             | 
|             | 
|             | 
|     STAGE DROP AREA     | 
|             | 
|             | 
|             | 
|             | 
+----------------------------------------------------+ 

+----------------------------------------------------+ 
| +------+ +------+ +------+ +------+ +------+ | 
|< |IMG A | |IMG B | |IMG C | |IMG D | |IMG E | >| 
| +------+ +------+ +------+ +------+ +------+ | 
+----------------------------------------------------+

在所述第二面板（IMG A..E）所有圖像都在階段拖動。我現在的問題是每次拖動圖像時，它首先在舞臺的左上角。

這是我拖放代碼：

$(document).ready(function() { 
    $(".Images").draggable({ 
    helper: 'clone', 
    scroll: false 
}); 

$("#stage").droppable({ 
    accept: ".Images", 
    drop: function (event, ui) { 
     if ($(ui.draggable).hasClass('copied')) return 
     var droppedItem = $(ui.draggable).clone().addClass('copied'); 
     droppedItem.draggable({ 
      containment: "#stage" 
     }); 
     $(this).append(droppedItem); 
    } 
}); 

});

這是我的舞臺CSS：

.stageCSS{ 
position:absolute; 
width:640px; 
height:376px; 
top: 124px; 
left: 84px; 
}

這是我的代碼的來源：http://jsfiddle.net/IrvinDominin/ufHMm/

來源

2014-01-14 coderush

ok了，你想去哪兒圖像去？到一個固定的位置？ –

我在哪裏放置圖像，但它必須在舞臺內。 – coderush

如果我正確理解，您想將盒子內的物品放到光標的確切位置。

要做到這一點，添加一個絕對定位的項目，一個相對定位到容器，計算座標，比設置項目的頂部和左側的CSS屬性。

的Jquery：

... 
    $(this).append(droppedItem); 
    var posX = ui.offset.left - $(this).offset().left; 
    var posY = ui.offset.top - $(this).offset().top; 
    droppedItem.css("left", posX); 
    droppedItem.css("top",posY); 
    ...

的CSS：

.box { 
    width:500px; 
    height:500px; 
    background: orange; 
    position: relative;  
} 
.copied 
{ 
    position: absolute; 
}

工作演示：http://jsfiddle.net/er144/3Hay4/

來源

2014-01-14 08:24:29 ER144

它適用於第一張圖片，但之後它會隨機丟棄圖片。你需要重新啓動posX –

你是對的，在IE中的行爲有所不同。對不起，我只在FF下測試過，並且在那裏工作。我稍後再看看，看看有什麼不對。 – ER144

獲取拖放jQuery的xy位置

回答

相關問題