html - 如何知道 Html5 拖放中的放置位置

Question

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

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

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

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

谢谢。

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

Answer 2

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

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

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

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