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

2022-01-11 00:00:00 drag-and-drop javascript safari

WHATWG 拖放的实现支持dragstart、drag 和 dragend 事件.

The implementation of the WHATWG drag and drop supports dragstart, drag and dragend events.

dragend 事件在可拖动对象返回到原始位置时触发，例如尝试尽可能地拖动红色框并释放它.dragend (和END！" console.log 消息)将不会触发，直到可拖动元素返回到原始位置(这在 Safari 浏览器中最明显).

The dragend event fires when the draggable object returns to the original position, e.g. try dragging the red box as far as you can and release it. The dragend (and "END!" console.log message) will not fire until the draggable element returns to the original position (this is most visible in the Safari browser).

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 或任何其他表明拖动手柄释放的事件没有延迟?

How do I capture the mouseup or whatever else event that would indicate the release of the drag handle without a delay?

我尝试过以下几种变化:

I have tried variations of:

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 之后不会触发.

Though, "mouseup" does not fire after dragstart.

我最接近找到在释放句柄后立即触发的事件是 mousemove:

The closest I got to finding an event that would fire instantly after the release of the handle is 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>

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

The problem is that this approach requires user to move the mouse.

推荐答案

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

The workaround is to enable drop on the 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之间没有延迟.

Making document.body to listen for the drop event results in dragend thinking that you will move the element to the new position upon releasing the handle. Therefore, there is no delay between handle release and dragend.

相关文章