html5 drag and drop拖动距离问题

我想根据拖动的距离来重新计算被拖动元素的相对位置,但是现在出现了很奇怪的问题:

ondragend触发的事件中的e.pageX 减去ondragstart中触发事件的e.pageX,并不是实际移动的X的距离,而是得出一个我不知道是怎么得出来的数字,据观察,ondragend触发的事件中的e.pageX 并不是所期望的,这个尝试一下下面的demo就可以发现。
Y方向也是。

不知道这里是不是有什么坑?以及如何计算实际拖动的X方向和Y方向的距离?

下面是demo代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div style="width: 100px;height:100px;background-color: #4A90E2" draggable="true" id="div">

</div>

<script>
    let d = document.getElementById('div');
    d.ondragstart = function(e){
        console.log('on drag start:', e.pageX,e.target);
        console.log('on drag start:', e.pageY);
    };
    d.ondrag = function(e){
//        console.log('on drag :', e.pageX,e.target);
//        console.log('on drag :', e.pageY);
    };
    d.ondragend = function(e){
        console.log("on drag end...",e.pageX, e.target);
        console.log("on drag end...",e.pageY);
    };
</script>

</body>
</html>

谢谢

阅读 5.5k
2 个回答

我测试没有问题,你可以拖成下面这种情况,看差值是不是方形的尺寸

clipboard.png

clipboard.png

我用chrome和opera试了一下,好像是元素左下角的坐标,firefox似乎不好用

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题