拖动HTML元素:如果鼠标在div外移动时如何处理?
我创建一个可拖动的div,就像这个例子:http://jqueryui.com/draggable/拖动HTML元素:如果鼠标在div外移动时如何处理?
一切工作正常,但如果我把鼠标移动速度快,鼠标离开格,然后停止跟随鼠标。我使用elem.addEventListener("mousemove", function(e) {/* ... */}, false);
,如果我将最后一个属性更改为true,那么它仍然不能正常工作。 div跟着鼠标,只要鼠标在div内。
我想解决它,而无需使用JQuery
你应该使用:
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
尽量把mousemove
事件上的文档,它抓住了整个页面上的事件,不仅当鼠标悬停在div。
这意味着每当鼠标移动并且它在页面上时,该事件就会被触发。
我真的会拖累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);
你试过了mouseleave或mouseout吗? – divakar 2014-10-07 08:58:08