Question

我目前正在实施一个小型演示应用，试图通过HTML5拖放。我正在尝试做的是在用户拖动时获取光标的位置，但是我遇到了一些问题。

拖动时似乎没有触发'mousemove'事件，这阻止了我找出鼠标的当前位置。我可以使用'drag'事件，但是我无法弄清楚如何从'drag'事件对象中获取位置。

Answer 1

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

下面的Runnable代码段：

//	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>

Answer 2

document.ondragover = function(evt) {
    evt = evt || window.event;
    var x = evt.pageX,
        y = evt.pageY;

    console.log(x, y);
}

jsFiddle

如果您使用的是jQuery ......

$(document).on('dragover', function(evt) {
    var x = evt.pageX,
        y = evt.pageY;

    console.log(x, y);

});

拖动时获取鼠标位置（JS + HTML5）

2 个答案: