Перетаскивание круга с помощью rafael.js - пример кода

Question

Я пытался найти исходный код для этого примера rafael.js, но на странице ссылка не работает.

Может ли кто-нибудь привести самый простой пример исходного кода, который демонстрирует, как можно использовать мышь для перетаскивания круга, используя rafael.js? Как в связанном примере?

Answer 1

Вы можете сослаться на сам источник на http://raphaeljs.com/reference.js, на L133 вы найдете соответствующий пример...

   (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"))

Удаление зависимостей и рефакторинг, чтобы сделать это - по моему скромному мнению - понятнее, вы получите...

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

Вы можете найти рабочий пример здесь: http://jsfiddle.net/ke1Ltbft/1/

Я лично предпочитаю немного изменить код...

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
}