如何知道 Html5 拖放中的放置位置答案

【问题标题】：How to know drop position in Html5 drag and drop如何知道 Html5 拖放中的放置位置
【发布时间】：2012-08-05 09:23:58
【问题描述】：

我正在尝试将 JqueryUi droppable 替换为 html5。

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

我知道我有鼠标 clientX 和 clientY，但这取决于您开始拖动的位置。

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

谢谢。

【问题讨论】：

标签： html drag-and-drop jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

<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>

【讨论】：

【解决方案2】：

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

以下是我在自己的研究中发现的dragenter 和dragover 的一些额外差异：

当鼠标在拖动某些东西时进入您的控件时会调用 DragEnter。
当鼠标仍在该矩形中并且仍在拖动时，将调用 DragOver。

矩形是指接收drop的目标元素。找到那些here。

【讨论】：