Raphael SVG move object along straight horizontal line

Question

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/

Fernandofernas

I suspect a confusion between x & y somewhere... When you move the mouse vertically, the object moves along the line whereas the mouse is dragged horizontally, nothing happens. – Closer

@Fernandofernas Does my answer below help? – Craniotomy

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

Craniotomy

Thanks. I add background-color to your shim div $shim.css("background-color", "yellow"); and realise the div shim is not following the straight line when draging it, how to make it drag along the line? – Fernandofernas

it is ok, i figured it out myself already, just add ui.position.top = pal.y; ui.position.left = pal.x;. Thanks bro. Great learning from your :) – Fernandofernas