¿Cómo agarrar y arrastrar un elemento alrededor de un círculo?

Hasta ahora tengo un círculo con un marcador.

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

Me gustaría agarrar y arrastrar el marcador alrededor del círculo, sin embargo, la funcionalidad actual solo empuja el marcador al hacer clic en él.

¿Qué cambios puedo hacer en el código para que el marcador se pueda arrastrar alrededor del círculo mientras se mantiene presionado el mouse?

Nota

Si pudiera actualizar el violín con su solución, se lo agradecería enormemente.

Cambié algún código

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

tambien agrega este codigo

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

en la función

este es el jsfiddle http://jsfiddle.net/sandeeprajoria/x5APH/11/

Para hacer algo de este tipo:

En la mousedown del mousedown en el elemento deseado, establezca:

  • mousemove evento en el documento para actualizar la posición del objective
  • evento mouseup en el documento para eliminar los eventos mousemove y mouseup que acaba de establecer.

Ejemplo en plano 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; }; }; 

Personalmente, me gusta mejorar esto aún más creando un elemento de “máscara” en toda la página para capturar eventos, de modo que (por ejemplo) al arrastrar una selección o imagen no se activen las acciones predeterminadas del navegador (que son extrañamente inmunes a todos los métodos de cancelación de eventos en este caso…)