了解 HTML 5 事件拖动答案

【问题标题】：Understanding HTML 5 event drag了解 HTML 5 事件拖动
【发布时间】：2014-11-26 18:11:44
【问题描述】：

我不明白为什么在事件拖动中鼠标坐标clientX的返回值总是0或释放鼠标之前的负值。

我准备了一个例子，当用户dragstart，鼠标位置是正确的，结束dragend...但是如果你查看drag的控制台，你会在dragend之前看到一个负值.

是正常行为吗？为什么？我需要避免这个 0 值。有什么解决办法吗？

  <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style>
    #test {
        position: absolute;
        width: 100px;
        height: 100px;    
        background-color:red;
    }
        </style>

    </head>
    <body>
        <div id="test" draggable="true">test</div>
        <script>
        var elm = document.getElementById('test');

        elm.addEventListener('drag', function (event) {
            //console.log(event.clientX);
            //console.log(event.clientY);
        }.bind(this));

        elm.addEventListener('dragstart', function (event) {
            console.log('start');
            console.log(event.clientX);
            console.log(event.clientY);
        }.bind(this));

        elm.addEventListener('drag', function (event) {
            console.log('during drag');// PROBLEM HERE
            console.log(event.clientX);
            console.log(event.clientY);
        }.bind(this));

        elm.addEventListener('dragend', function (event) {
            console.log('end');
            console.log(event.clientX);
            console.log(event.clientY);
        }.bind(this));


        </script>

    </body>
    </html>

【问题讨论】：

有些东西告诉我你不能，但为什么不检查if ( event.clientX < 0 ) 看看它是否为负数，如果是，就返回。
jsfiddle.net/adeneo/gg8gLpg0/1
@adeneo 感谢您的工作，但这是为什么呢？一个错误？
@adeneo 什么可以替代事件拖动？
我不知道为什么会这样，而且我认为没有替代事件，您可能只需要解决它。

标签： javascript jquery html drag-and-drop

【解决方案1】：

在我对 Firefox 的测试中，拖动元素只会触发 0。而且，拖动事件阻止了“mousemove”事件到达文档级别以以这种方式捕获它。

jsfiddle.net/qgedt70a/

Mozilla 的官方文档说 clientX 对于拖动的对象是本地的，而 screenX 是全局坐标，但是在我在上述 jsfiddle 的测试的变体中，两者都从拖动事件返回 0。

可能是一个错误。或者，我很好奇他们是否为某些奇怪的安全场景禁用了它？

【讨论】：