Javascript 拖放返回坐标答案

【问题标题】：Javascript Drag and drop return cordinatesJavascript 拖放返回坐标
【发布时间】：2012-12-27 16:30:06
【问题描述】：

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

例子：

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

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

【问题讨论】：

你的意思是PaperJs？
看来 paper.js 有“onMouseDrag” 就像我想要的那样工作，但我真的需要使用整个框架来实现这个功能吗？

标签： javascript jquery html mouseevent

【解决方案1】：

查看此链接：

http://jqueryui.com/draggable/

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

或者您可以随时使用mousedown、mouseup 和mousemove 事件手动计算它们。用你觉得舒服的方式找我。

【讨论】：

这是通过使整个对象可拖动，这不是我想要的。

【解决方案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（观看控制台）

【讨论】：

这有点像我正在寻找的东西，但似乎解决方案在释放鼠标按钮之前不会返回拖动。
@user1932567 返回什么？拖动时调用的是 move 函数，此示例仅记录移动 x/y。
是的，但直到释放鼠标按钮 :) 这是我在所有回复中最接近的事情。
@user1932567 我不明白你的意思，move 函数是在mousemove 上调用的。您是否尝试过演示并查看控制台？

【解决方案3】：

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

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

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

【讨论】：