Javascript拖放返回座標

我一直在尋找一個很好的JavaScript教程拖放。不要將元素作爲div或畫布移動或調整其大小，但僅用於返回拖動的移動。Javascript拖放返回座標

例子：

像憤怒的小鳥彈弓或在帆布通過拖動左右移動的圖像。
通過鼠標拖動來移動「地圖」。
在一個div在那裏我從A點在同一個元素拖動到B沒有四處移動它，只是返回不停止所有運動的代碼已經運行

例子，我發現至今都通過使整個元素拖拽移動通過不同的框架元素，這不是我所追求的，所以請點我在正確的方向，你將是我的白天

來源

2012-12-27 user1932567

你的意思是類似於[PaperJs]（http://paper.ws/examples/chain/）？ – asgoth

看來paper.js有「onMouseDrag」這樣的作品就像我想要但我真的需要使用整個框架只是爲了這個功能？ – user1932567

檢查該鏈接的英雄：

http://jqueryui.com/draggable/

它在左窗格和右窗格中都有大量樣本，並且還詳細介紹瞭如何使用它們，希望這可以幫助您。

或者您可以隨時使用mousedown，mouseup和mousemove事件來手動計算它們。讓我滿意與你的舒適。

來源

2012-12-27 16:36:19 GautamJeyaraman

這是通過使整個對象可拖動至極不是我以後。 – user1932567

下面是我平時做它，它非常直截了當：

1在鼠標按下，保存了鼠標的COORDS中的對象並綁定計算距離的鼠標移動功能。

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

演示：（看控制檯）

來源

2012-12-27 16:42:18 David

這是有點我正在尋找，但似乎解決方案不會返回拖動，直到釋放鼠標按鈕。 – user1932567

@ user1932567返回什麼？它是在拖動時被調用的'move'函數，並且此示例只記錄x/y的運動。 – David

是的，但直到釋放鼠標按鈕:) 這是我離開所有答覆後最接近的東西。 – user1932567

如果您只需要鼠標的座標指針，你可以使用mousemove的clientX和clientY性質事件。

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

這個例子重視聽者的window對象，但你可以做同樣的與其他元素..如。 document.getElementById('mydiv').addEventListener

來源

2012-12-27 17:18:19 lostsource

Javascript拖放返回座標

回答

相關問題