Raphael SVG sposta l'oggetto lungo la linea orizzontale diritta

Question

Desidero spostare un pulsante verde lungo un tracciato orizzontale ma il pulsante verde non sta seguendo il mio mouse. Come fare il pulsante verde segui il mio mouse quando lo trascini? Codice:

<script> 
var pdefs = { 
     horizontalLine: { 
      path: [ 
        ['M',50,240], 
        ['l',640,0] 
       ], 
      transform: 'r0' 
     } 
    }, 
    useDef = 'wiggles'; 

function run() 
{ 
    var paper = Raphael($('.wrapper')[0], 600, 600), 
     path = paper.path(Raphael.transformPath(pdefs['horizontalLine'].path, pdefs['horizontalLine'].transform)) 
        .attr('stroke-width', 10) 
        .attr('stroke', 'rgb(80,80,80)'), 
     knob = paper.ellipse(0, 0, 25, 15) 
        .attr('fill', 'lime') 
        .attr('stroke', 'rgba(80,80,80,0.5)'), 
     $shim = $('<div>') 
        .css({position: 'absolute', width: 50, height: 50 }) 
        .appendTo($('.wrapper')), 
     len = path.getTotalLength(), 
     bb = path.getBBox(), 
     mid = {x: bb.x+bb.width/2, y: bb.y+bb.height/2}, 
     pal = path.getPointAtLength(0); 
    knob.translate(pal.x,pal.y).rotate(pal.alpha); 
    $shim.css({ left: pal.x-5, top: pal.y-5 }); 
    $shim.draggable({ 
     drag: function (e, ui) { 
      // Find lines and then angle to determine 
      // percentage around an imaginary circle. 
      var t = (Raphael.angle(ui.position.left-25, ui.position.top-25, mid.x, mid.y)) /360; 
      // Using t, find a point along the path 
      pal = path.getPointAtLength((t * len) % len); 
      // Move the knob to the new point 
      knob.transform('t' + [pal.x, pal.y] + 'r' + pal.alpha); 
     }, 
     stop: function (e, ui) { 
      $shim.css({ left: pal.x-25, top: pal.y-25 }); 
     } 
     }); 
} 

run(); 

</script> 

Demo: https://jsfiddle.net/zac1987/zea53w7f/

Answer 1

La funzione drag assomiglia ad un avanzo di qualche widget di diverso (una manopola circolare, forse?).

Invece di:

drag: function (e, ui) { 
    // Find lines and then angle to determine 
    // percentage around an imaginary circle. 
    var t = (Raphael.angle(ui.position.left-25, ui.position.top-25, mid.x, mid.y)) /360; 
    // Using t, find a point along the path 
    pal = path.getPointAtLength((t * len) % len); 
    // Move the knob to the new point 
    knob.transform('t' + [pal.x, pal.y] + 'r' + pal.alpha); 
} 

Prova:

drag: function (e, ui) { 
    var t = ui.position.left - 50; 
    // Using t, find a point along the path 
    pal = path.getPointAtLength(Math.max(t, 0)); 
    // Move the knob to the new point 
    knob.transform('t' + [pal.x, pal.y] + 'r' + pal.alpha); 
} 

https://jsfiddle.net/1Lzqhm9o/2/