Raphael SVG move object along straight horizontal line

I want to move a green button along a horizontal line path but the green button is not following my mouse. How to make green button follow my mouse when dragging it? code :

<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/

1 Answers

Answers 1

Your drag function looks like a leftover from some different widget (a circular knob perhaps?).

Instead of:

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 );  } 

Try:

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/

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati