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，dragleave和drop事件。如果你没有：https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop，请看一下。我记得在那里读过某个事件，你可以访问被拖动元素的x和y位置。

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

拖动时鼠标进入控件时会调用DragEnter。
当鼠标仍处于该矩形并且仍在拖动时，将调用DragOver。

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

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

2 个答案: