Question

我正在创建一个可拖动的div，如下例所示：http://jqueryui.com/draggable/

一切正常，但如果我快速移动鼠标，鼠标离开div，则它会停止跟随鼠标。我使用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实现Drag-n-Drop的教程： 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？）

如果要捕捉离开droppable div的鼠标，可以使用

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

如果在拖动可拖动的div时没有任何问题，请尝试在draggable div上放置一个dragover事件

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

拖动HTML元素：如果鼠标移动到div之外，如何处理？

3 个答案: