如何获得本机拖动事件后mouseUp事件？(How to get mouseup event aft

在WHATWG的实现拖放支持dragstart ， drag和dragend事件。

该dragend事件触发时，拖动对象返回到原来的位置，例如尝试拖动红色框，你可以尽可能和释放。该dragend （和“END！” console.log消息）将不会触发直到拖动元素返回到原来的位置（这是在Safari浏览器最明显）。

 var handle = document.querySelector('#handle'); handle.addEventListener('dragend', function () { console.log('END!'); });

 #handle { background: #f00; width: 100px; height: 100px; }

 <div id="handle" draggable="true"></div>

如何捕捉mouseup或任何其他事件将表明拖动手柄释放没有延迟？

我已经试过的变化：

 var handle = document.querySelector('#handle'); handle.addEventListener('dragend', function () { console.log('END!'); }); handle.addEventListener('mouseup', function () { console.log('Mouseup'); });

 #handle { background: #f00; width: 100px; height: 100px; }

 <div id="handle" draggable="true"></div>

虽然，“鼠标松开”不发生火灾后dragstart 。

最近我到发现会立即触发手柄释放后是一个事件mousemove ：

 var handle = document.querySelector('#handle'); handle.addEventListener('dragend', function () { console.log('END!'); }); window.addEventListener('mousemove', function () { console.log('I will not fire during the drag event. I will fire after handle has been released and mouse is moved.'); });

 #handle { background: #f00; width: 100px; height: 100px; }

 <div id="handle" draggable="true"></div>

问题是，这种方法需要用户移动鼠标。

解决办法是启用的下降document.body ：

// @see https://developer.mozilla.org/en-US/docs/Web/Events/dragover
document.body.addEventListener('dragover', function (e) {
    // Prevent default to allow drop.
    e.preventDefault();
});

document.body.addEventListener('drop', function (e) {
    // Prevent open as a link for some elements.
    e.preventDefault();
});

制作document.body听的drop在事件结果dragend认为你会在释放手柄的元素移动到新位置。因此，手柄释放之间没有延迟dragend 。