javascript - Raphael.js has weird behavior on drag -

i have circle line center edge of circle. user can click on , drag line , degrees wherever set line. i'm using code answer here , have adjusted code accordingly.

everything works fine, farther down page element affected raphael is, farther outside of circle mouse has in order drag line. jsfiddle

var canvas = raphael('pivot', 0, 0, 320, 320);  var clock = canvas.circle(200, 150, 100).attr("stroke-width", 2); canvas.circle(200, 150, 3).attr("fill", "#000");  var angleplus = 360,     rad = math.pi / 180,     cx = 200,     cy = 150,     r = 90,     startangle = -90,     angle = 90,     x, y, endangle;  (i = 1; < 5; i++) {      endangle = startangle + angle;     x = cx + r * math.sin(endangle * rad);     y = cy - r * math.cos(endangle * rad);      canvas.text(x, y, endangle);      startangle = endangle; }  var hand = canvas.path("m200 50l200 150").attr("stroke-width", 5);  hand.drag( move, start, end );  function move (dx,dy,x,y) {     var pt = this.node.ownersvgelement.createsvgpoint();     pt.x = x;      pt.y = y;      var angle = ( 90 + math.atan2(pt.y - clock.attr('cy') - 5, pt.x - clock.attr('cx') - 5 ) * 180 / math.pi + 360) % 360;     this.rotate(angle, 200,150);     this.angle = angle; }  function start() { };  function end() {     alert(parseint(this.angle)); } 

i'm wondering why happens , if it's fixable?

here updated original one, bit added , bit of redundancy removed, , i've added fiddle original answer reflect it.

the key bits i've added are...

var cpt = clock.node.ownersvgelement.createsvgpoint(); cpt.x = clock.attr('cx'); cpt.y = clock.attr('cy'); cpt = cpt.matrixtransform(clock.node.getscreenctm()); 

the centre of clock has moved, using cx of circle alone, doesn't make sense relative mouse event. need take account offset , transforms on screen clock.

we can getscreenctm (get matrix element screen), , can use matrix original cx, cy figure out on screen.

then later, instead of cx, cy, use new adjusted coordinates cpt.x/y

var angle = ( 90 + math.atan2(y - cpt.y - 5, x - cpt.x - 5 ) * 180 / math.pi + 360) 

jsfiddle - drag hand