raphael js drag rotation in Firefox and Internet Explorer

Question

I am new to the SVG and Raphael world and am trying to create a radial dial that has a draggable needle.

The drag works fine in Chrome, Safari, and Opera. In Internet Explorer the movement is very jittery and and will often return to it's initial starting position. In Firefox, it doesn't work at all :(

var paper = Raphael("paper1", 250, 250);
            var dialCenter = 125;
            var dialRadius = 125;
            var dialCircum = 2 * Math.PI * dialRadius;
            var circle = paper.circle(dialCenter, dialCenter, dialRadius).attr({fill: "orange"});
            paper.circle(125, 125, 10).attr({fill: "black", "stroke-width": 5, stroke: "purple"});
            var needle = paper.path("M" + dialCenter.toString() + ' ' + dialCenter.toString() + ", L0,125").attr({stroke: '#ffff00', 'stroke-width': 6});
            var centerCircle = paper.circle(125, 125, 10).attr({fill: "black", "stroke-width": 5, stroke: "purple"});
            needle.data("id", 'needle1');
            var degStep = 1;
            var currentDeg = 1;
            var mouseXPos, mouseYPos, mouseDir, mouseEv;

            var needleSet = paper.set();
            needleSet.push(needle);

            var currSectorX = 0;
            var currSectorY = 0;

            moveNeedle = function (e) {
                var mouseX = (e.offsetX == undefined) ? e.layerX : e.offsetX;
                var mouseY = (e.offsetY == undefined) ? e.layerY : e.offsetY;
                var needleA = Raphael.angle(dialCenter, dialCenter, needle.getPointAtLength(needle.getTotalLength())['x'], needle.getPointAtLength(needle.getTotalLength())['y']);
                var newA = Raphael.angle(dialCenter, dialCenter, mouseX, mouseY);
                var rotateAngle = (360 - needleA) + newA;
                needle.transform('r' + rotateAngle + ",125,125");
            }
            var startDrag = function () {
                // console.log(this);
            }, dragger = function (dx, dy) {
                moveNeedle(event);
            }, endDrag = function () {

            };

            needleSet.drag(dragger, startDrag, endDrag);

Here's a fiddle, http://jsfiddle.net/fiddle_fish/7bmwvfmm/1/

Any tips will be greatly appreciated.

Answer 1

I can't see where 'event' is defined, you could try amending your handler function params to take the event direct like so...

      moveNeedle = function (dx,dy,x,y,e) {

      ....

      var startDrag = function () {
            // console.log(this);
      }, 
      dragger = moveNeedle,
      endDrag = function () {};

jsfiddle

Edit: That should fix the firefox bug. For the jittery problem, I think its layerX/Y. Maybe use something like clientX/Y, eg

           var mouseX = e.clientX;
           var mouseY = e.clientY;

jsfiddle