Получение позиции мыши при перетаскивании (JS + HTML5) - PullRequest
Новая
       0

Получение позиции мыши при перетаскивании (JS + HTML5)

15 голосов
/ 27 апреля 2011

В настоящее время я внедряю небольшое демонстрационное приложение, пытаясь перетаскивать мышью HTML5.Сейчас я пытаюсь получить положение курсора, когда пользователь перетаскивает, однако у меня возникают некоторые проблемы.

Кажется, что событие mousemove не срабатывает, когдаперетаскивание, которое мешает мне понять текущее положение мыши.Я мог бы использовать событие «перетаскивания», однако я не могу понять, как получить позицию из объекта события «перетаскивания».

Ответы [ 2 ]

22 голосов
/ 27 апреля 2011 
//  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>
13 голосов
/ 27 апреля 2011 
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);

});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...