問題描述

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.

這篇關于原生拖動事件后如何獲取 mouseup 事件?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！