Dragging a circle using rafael.js - code example

Question

I was trying to find the source code for this rafael.js example but on the page the link is broken.

Could someone give the simplest source code example that demonstrates how one can use the mouse to drag a circle using rafael.js ? Just like in the linked example ?

Answer 1

You can reference the source itself at http://raphaeljs.com/reference.js, at L133 you find the relevant example...

   (function (r) {
        var x, y;
        r.circle(15, 15, 10).attr(fill).drag(function (dx, dy) {
            this.attr({
                cx: Math.min(Math.max(x + dx, 15), 85),
                cy: Math.min(Math.max(y + dy, 15), 85)
            });
        }, function () {
            x = this.attr("cx");
            y = this.attr("cy");
        });

    })(prepare("Element.drag-extra"))

Removing dependencies and refactoring to make it—in my humble opinion—clearer, you get...

var paper = Raphael(10, 50, 320, 200);
var x, y;

paper.circle(15, 15, 10).attr("fill", "red").drag(
  function (dx, dy) {
    this.attr("cx", x + dx);
    this.attr("cy", y + dy);
  }, 
  function () {
    x = this.attr("cx");
    y = this.attr("cy");
  }
);

You can find the working example here: http://jsfiddle.net/ke1Ltbft/1/

I personally prefer to refactor the code a bit...

paper.circle.drag(start, move, end)

function start(x, y) {
  // mouse/touch start code
}

function move(dx, dy) {
  // mouse/touch move code
}

function end(x, y) {
  // mouse/touch end code
}