How to grab and drag an element around a circle?

Question

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 functionality only nudges the marker when you click it.

What changes can I make to the code so that the marker can be dragged around the circle while the mouse is held down?

Note

If you could update the fiddle with your solution I would greatly appreciate it.

Answer 1

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/

Answer 2

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...)