Question

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

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

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

注意

如果你能用你的解决方案更新小提琴，我将非常感激。

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

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

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

2 个答案: