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 functional

Answer 1

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