javascript - Javascript拖放返回坐标

Question

我一直在寻找关于 javascript 拖放的好教程。不要将元素作为 div 或画布移动或调整其大小，而只是返回拖动的移动。

例子：

• 就像愤怒的小鸟中的弹弓一样，或者通过拖动来在画布中移动图像。
• 通过鼠标拖动移动“地图”。
• 在一个 Div 中，我在同一个元素中从点 A 拖动到 B 而不移动它，只是返回移动而不停止所有已经运行的代码

到目前为止，我发现的示例是通过使整个元素可拖动来通过不同的框架移动元素，这不是我所追求的，所以请指出正确的方向，你将成为我今天的英雄

Answer 1

如果您只需要鼠标指针的坐标，您可以使用事件的clientX和clientY属性mousemove。

window.addEventListener("mousemove",function(e) { 
    console.log(e.clientX,e.clientY); 
},false);

该示例将侦听器附加到windowobject ，但您可以对其他元素执行相同操作.. 例如。document.getElementById('mydiv').addEventListener

Answer 2

这是我通常的做法，非常简单：

1 在 mousedown 上，将鼠标的坐标保存在一个对象中并绑定一个计算距离的 mousemove 函数。

2 在 mouseup 上，取消绑定 mousemove 处理程序。

下面是一些代码示例：

var coords; // the starting point

var move = function(e) {
      var diffX = e.pageX - coords.x; // the moved x distance
      var diffY = e.pageY - coords.y; // the moved y distance
      console.log('move: '+diffX+'(x) '+diffY+'(y)');
    };

$(document).mousedown(function(e) {
  coords = {x: e.pageX, y: e.pageY}; // saves the mouse position on mousedown
  $(this).mousemove(move);
}).mouseup(function() {
  $(this).unbind('mousemove', move);
});

演示： http: //jsbin.com/okatoj/1（观看控制台）

Answer 3

检查此链接：

http://jqueryui.com/draggable/

它在左右窗格中有大量示例，以及如何使用它们的详细信息，希望对您有所帮助。

或者，您总是可以只使用 mousedown、mouseup 和 mousemove 事件来手动计算它们。找我你觉得舒服的。