如何抓住并拖动圆周围的元素？

到目前为止，我有一个带标记的圆圈。

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

我想抓住并拖动圆圈周围的标记，但是当前function仅在您单击标记时轻推标记。

我可以对代码进行哪些更改，以便在按住鼠标时可以围绕圆圈拖动标记？

注意

如果您可以使用您的解决方案更新小提琴，我将非常感激。

Answer 1

改变了一些代码

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

还添加此代码

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

在function

这是jsfiddle http://jsfiddle.net/sandeeprajoria/x5APH/11/

Answer 2

要做这种事情：

在所需元素的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; }; }; 

我个人希望通过在整个页面上创建一个“mask”元素来捕获事件来进一步改进这一点，这样（例如）拖动选择或图像不会触发默认的浏览器操作（这对于所有事件取消方法都是奇怪的。这个案例…）