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>