如何知道在Html5中的拖放位置拖放

Question

我试图用JqueryUi droppable替换为html5。

而且我需要知道拖放时刻可拖动对象的确切位置。

我知道我有鼠标clientX和clientY，但是这取决于你开始拖动的地方。

有没有办法让位置或对象本身？

谢谢。

Answer 1

您将必须确定您想要接受的目标并将其上的dragenter,dragover,dragleave和drop事件连接起来。如果你还没有：https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop，请看看这个。我记得在那里读到一个事件，你可以访问拖动元素的x和y位置。

这里有dragenter和dragover差异我自己的研究过程中发现的一些额外的：当鼠标进入你的控制，同时拖动的东西

• dragEnter事件被调用。
• 当鼠标仍在该矩形中并仍在拖动时，将调用DragOver。

矩形指的是接收丢弃的目标元素。发现那些here。

Answer 2

<script type="text/javascript"> 
    var dragX; 
    var dragY; 

    $("body").bind("dragover", function (e) { 
     dragX = e.pageX, dragY = e.pageY; 
     console.log("x=" + dragX + " and y="+ dragY); 
    }); 

</script>