javascript - 拖动 HTML 元素 : How to handle if the mouse moves outside the div?

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

您可以在此处找到使用 native JavaScript 实现拖放操作的教程: http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx

我会推荐以下 HTML5 解决方案

这是 JS Fiddle:http://jsfiddle.net/v4pd25s3/

另外，检查一个完整的 HTML5 解决方案:http://blog.teamtreehouse.com/implementing-native-drag-and-drop

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