如何抓住和拖動一個圓周的元素？

到目前爲止，我有一個標記的圓圈。如何抓住和拖動一個圓周的元素？

http://jsfiddle.net/x5APH/1/

我想抓住並拖動圓圈標記，但是目前的功能，當你點擊它只是輕推標記。

我可以對代碼做些什麼改變，以便鼠標按下時可以將標記拖動到圓周上？

注意

如果你可以更新您的解決方案撥弄我將不勝感激。

來源

2012-04-13 user784637

改變了一些代碼

 $(document).ready(function(){    

      $('#marker').on('mousedown', function(){ 
       $('body').on('mousemove', function(event){ 
        rotateAnnotationCropper($('#innerCircle').parent(), event.pageX,event.pageY, $('#marker'));  
       }); 

      });      
     });

也在功能

這是的jsfiddle http://jsfiddle.net/sandeeprajoria/x5APH/11/

來源

2012-04-13 23:18:54

謝謝Sandeep，這正是我一直在尋找的。我用'$（document）'替換了'$（'body'）''選擇器，這樣如果有人走出瀏覽器窗口，移動可以繼續。 – user784637 2012-04-13 23:25:01

我的代碼有一個問題http://jsfiddle.net/x5APH/16 /，我注意到你需要直接點擊塊的中間來移動它。有沒有辦法點擊它的一個角落來流暢地移動它？ – user784637 2012-04-13 23:29:21

好吧，我嘗試點擊框的角落...它似乎工作正常......你究竟在尋找什麼.... – 2012-04-13 23:36:36

做這樣的事情：

在mousedown所需的元素上，設置：

mousemove事件的文件以更新文檔
mouseup事件的目標位置刪除您剛剛設置的mousemove和mouseup事件。

實施例以純JS：

elem.onmousedown = function() { 
    document.body.onmousemove = function(e) { 
     e = e || window.event; 
     // do stuff with e 
    }; 
    document.body.onmouseup = function() { 
     document.body.onmousemove = document.body.onmouseup = null; 
    }; 
};

個人我喜歡通過在整個頁面創建「掩模」元件來捕獲事件進一步改善這一點，以使得（例如）拖動選擇或圖像不會觸發默認瀏覽器的操作（這是奇怪的免疫所有事件消除在這種情況下，方法...）

來源

2012-04-13 22:27:00

感謝Kolink爲'mousemove'和'mouseup'概念添加以下代碼

$('body').on('mouseup', function(event){ $('body').unbind('mousemove')});

。如果你有時間，你能更新小提琴嗎？ – user784637 2012-04-13 22:35:25

不幸的是，因爲我堅決拒絕使用jQuery（出於許多非常好的原因）。這個概念並不難，特別是因爲你已經有了執行這個動作的代碼。只要刪除當前的'onclick'，並將其替換爲我在答案中給出的結構。 – 2012-04-13 22:57:48

@Kolink，我想聽聽其中一些原因，你拒絕使用jQuery，我個人是它的用戶，但我從來沒有聽說過不使用它的原因，並希望聽到一些。 – Dale 2012-04-13 23:15:54

如何抓住和拖動一個圓周的元素？

回答

相關問題