javascript - 如何在原生拖动事件后获取 mouseup 事件？

Question

WHATWG 的实现 drag and drop支持 dragstart、drag 和 dragend 事件。

当可拖动对象返回到原始位置时，例如，拖动对象会触发 dragend 事件。尝试将红色框拖动到尽可能远的位置然后释放它。在可拖动元素返回到原始位置(这在 Safari 浏览器中最明显)之前，dragend(和“END!”console.log 消息)不会触发。

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 或任何其他指示拖动 handle 释放而没有延迟的事件？

我尝试过以下变体:

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>

但是，“mouseup”在 dragstart 后不会触发。

我最接近找到在释放 handle 后立即触发的事件是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>

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

Answer 1

解决方法是在 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 认为您在释放时会将元素移动到新位置 handle 。因此，句柄释放和dragend之间没有延迟。