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

Question

WHATWG drag and drop 的实现支持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>

不过，“mouseup”在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>

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

Answer 1

解决方法是在document.body 上启用drop：

// @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之间没有延迟。