html5拖放，獲取被拖動項的位置

Question

有沒有辦法讓在拖動的項目位置dragover / dragenter / dragleave事件的X和Y方面相關的頁面？ 我知道我可以通過調用event.clientX或event.clientY來獲取鼠標位置，但是我想知道由拖動創建的浮動元素的位置（可以由event.dataTransfer.setDragImage()設置的位置event.dataTransfer.setDragImage()功能）

例如，此代碼將在拖動時打印鼠標位置，而不是浮動元素的實際偏移量：

function dragOver(event) {
   console.log(event.clientX
});

Answer 1

借助jQuery庫，您可以實現它。您可以使用控制台來打印值，僅顯示您在屏幕上打印位置。

 $('#dragMe').draggable( { containment: $('body'), drag: function(){ var position = $(this).position(); var xPos = position.left; var yPos = position.top; $('#positionX').text('positionX: ' + xPos); $('#positionY').text('positionY: ' + yPos); }, accept: '#dragMe', over : function(){ $(this).animate({'border-width' : '5px', 'border-color' : '#0f0' }, 500); $('#dragThis').draggable('option','containment',$(this)); } }); 

 #dragMe { width: 10em; height: 6em; padding: 0.5em; border: 4px solid #ccc; border-radius: 0 2em 2em 2em; background-color: #fff; background-color: rgba(255,255,255,0.5); } #dropMe { width: 12em; height: 12em; padding: 0.5em; margin: 0 auto; } 

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="dragMe"> <p>DRAG ME</p> <ul> <li id="positionX"></li> <li id="positionY"></li> </ul> </div> <div id="dropMe"></div>