How to grab and drag an element around a circle?

后端 未结 2 1537
不知归路
不知归路 2021-01-03 17:46

So far I have a circle with a marker.

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

I would like to grab and drag the marker around the circle, however the current functional

相关标签:
2条回答
  • 2021-01-03 17:53

    changed some code

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

    also add this code

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

    in the function

    this is the jsfiddle http://jsfiddle.net/sandeeprajoria/x5APH/11/

    0 讨论(0)
  • 2021-01-03 17:58

    To do anything of this sort:

    On mousedown on the desired element, set:

    • mousemove event on the document to update the position of the target
    • mouseup event on the document to remove the mousemove and mouseup events you just set.

    Example in plain 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;
        };
    };
    

    Personally I like to improve this further by creating a "mask" element over the whole page to capture events, so that (for example) dragging a selection or image does not trigger default browser actions (which are strangely immune to all event cancelling methods in this case...)

    0 讨论(0)
提交回复
热议问题