拖動HTML元素：如果鼠標在div外移動時如何處理？

Question

我創建一個可拖動的div，就像這個例子：http://jqueryui.com/draggable/

一切工作正常，但如果我把鼠標移動速度快，鼠標離開格，然後停止跟隨鼠標。我使用elem.addEventListener("mousemove", function(e) {/* ... */}, false);，如果我將最後一個屬性更改爲true，那麼它仍然不能正常工作。 div跟着鼠標，只要鼠標在div內。

我想解決它，而無需使用JQuery

Answer 1

你應該使用：

elem.addEventListener("mouseup", function(e) { 

}, false); 

elem.addEventListener("mousemove", function(e) { 

}, false); 

elem.addEventListener("ondragstart", function(e) { 

}, false); 

你可以找到一個教程使用原生的JavaScript這裏實現拖放正下降： http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx

我建議以下HTML5解決方案

這裏是JS小提琴：http://jsfiddle.net/v4pd25s3/

此外，檢查一個功能完善的HTML5解決方案：http://blog.teamtreehouse.com/implementing-native-drag-and-drop

http://blog.teamtreehouse.com/implementing-native-drag-and-drop

Answer 2

儘量把mousemove事件上的文檔，它抓住了整個頁面上的事件，不僅當鼠標懸停在div。

這意味着每當鼠標移動並且它在頁面上時，該事件就會被觸發。

Answer 3

我真的會拖累HTML5工作，如果你支持的瀏覽器是最近的下降。
我真的不明白你的問題（也許是的jsfiddle？）

如果你想抓老鼠離開投擲的DIV，你可以使用

droppableDiv.addEventListener("dragleave", function(e) { 
//Do stuff here 
}, false); 

如果你的問題是什麼拖動時情況發生在可拖動的div上，嘗試在draggable div上放置dragover事件

draggableDiv.addEventListener("dragover", function(e) { 
//Do stuff here 
}, false);