javascript - 拖动时获取鼠标位置(JS + HTML5)

标签 javascript html

我目前正在实现一个小型演示应用程序,试图让我了解如何使用 HTML5 进行拖放操作。我现在想做的是在用户拖动时获取光标的位置,但是我遇到了一些问题。

似乎在拖动时不会触发“mousemove”事件,这使我无法确定鼠标的当前位置。我可以使用“拖动”事件,但我不知道如何从“拖动”事件对象获取位置。

最佳答案

//  JavaScript

document.addEventListener("dragover", function(e){
    e = e || window.event;
    var dragX = e.pageX, dragY = e.pageY;

    console.log("X: "+dragX+" Y: "+dragY);
}, false);

//  jQuery

$("body").bind("dragover", function(e){
    var dragX = e.pageX, dragY = e.pageY;

    console.log("X: "+dragX+" Y: "+dragY);
});

下面的可运行代码片段:

//	JavaScript (a really great library that extends jQuery, check it out)

document.addEventListener("dragover", function(e){
e = e || window.event;
var dragX = e.pageX, dragY = e.pageY;

console.log("X: "+dragX+" Y: "+dragY);
}, false);

//	jQuery (the native-language JavaScript is written in)

$("body").bind("dragover", function(e){
var dragX = e.pageX, dragY = e.pageY;

console.log("X: "+dragX+" Y: "+dragY);
});
<!doctype>
<html>
  <head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>
  <body>LOL drag something over me (open the console)</body>
</html>

关于javascript - 拖动时获取鼠标位置(JS + HTML5),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5798167/

相关文章:

javascript - HTML 行已添加,短暂显示,然后消失

javascript - 如何为移动设备使用较低分辨率的图像?

javascript - 我怎样才能让这个固定的导航停止闪烁?

html - 如何在悬停时使 flex 边框变红?

javascript - 为什么我的 Cordova 项目无法编译?

javascript - 无法读取 if 语句中未定义的属性 'replace'

JavaScript 和 HTML 正则表达式不工作

JavaScript 表单提交链接

javascript - 使用 jquery 删除一个 div 但将 div 保留在其中

javascript - 如何向List.js添加另一个过滤类别?