Question

WHATWG drag and drop的实施支持dragstart，drag和dragend事件。

当可拖动对象返回到原始位置时，dragend事件将触发，例如尝试尽可能拖动红色框并释放它。在可拖动元素返回到原始位置之前，dragend（和＆＃34; END！＆＃34; console.log消息）不会触发（这在Safari浏览器中最为明显）。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何捕获mouseup或其他任何可以指示拖动句柄释放而没有延迟的事件？

我尝试过各种变体：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

虽然，＆＃34; mouseup＆＃34;在dragstart之后不会触发。

我最接近发现一个事件会在释放句柄后立即触发mousemove：

＆＃13;

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.'); 
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

如何在本机拖动事件后获取mouseup事件？

1 个答案: