Question

view-source:http://raphaeljs.com/touches.html

http://raphaeljs.com/touches.html

I’d love it if somebody explained why this drag ‘n’ drop example works. I can gather roughly what each function is doing but I can’t piece together why this moves when there’s nothing telling it to move.

Answer 1

The move function behaves as a callback, and it takes 2 arguments, dx, dy. They stand for delta-X and delta-Y respectively.

If you see this line:

this.attr({cx: this.ox + dx, cy: this.oy + dy});

Then you will notice that ox and oy stand for original-X and original-Y respectively.

Thus you can deduct that the attr function is being called with arguments that specify original X + delta X and original Y + delta Y.

Make sense?

Do not get confused with the animate calls – they are for expanding/contracting the shape on start/stop. Every time you move the mouse, the move function is called, and the attr is updated.