拖动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);