Chapter 3: Drag Events

by Stéphane Cabaret

JavaScript

var paper = Raphael(0, 0, 500, 500);
paper.ellipse(300, 200, 50, 20)
.attr("fill", "green")
.transform("T5000,1000")
.transform("T50,10");
circle.drag(dragmove, dragstart, dragend);
function dragstart(x, y, e) {
// save the value of the transformation at the start of the drag
// if this is the initial drag, it will be a blank string
this.current_transform = this.transform();
// just for kicks
this.attr("fill", "orange");
}
function dragmove(dx, dy, x, y, e) {
// adjust the pre-existing transformation (if any) by the drag difference
this.transform(this.current_transform+'T'+dx+','+dy);
}
function dragend(e) {
// update the current transformation with the final value
this.current_transform = this.transform();
// that's enough kicks
this.attr("fill", "yellow");
}