javascript - 如何围绕圆圈抓取和拖动元素？

Question

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

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

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

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

笔记

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

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

在函数中

这是 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;
    };
};

就我个人而言，我喜欢通过在整个页面上创建一个“掩码”元素来捕获事件来进一步改进这一点，以便（例如）拖动选择或图像不会触发默认浏览器操作（奇怪的是，这些操作不受所有事件取消方法的影响）这个案例...）