Optimizing Set Drag and Drop in RaphaelJS - raphael

Question

So I tried to use translate and call the drag event on the set when certain elements in the set have the drag event intiated on them. But it's a little slow. Does anyone know how to optimize to make it faster?
Here's the function im using
function dragsymbolsoncanvas(foo){//foo is the set passed.
function dragger(){
this.dx = this.dy = 0;
};
function mover(s){
return function(dx, dy){
(s||this).translate(dx-this.dx,dy-this.dy);
this.dx = dx;
this.dy = dy;
}
};
foo.forEach(function(herp){//set.forEach function from raphaeljs
if(herp.data("candrag")=="true"){
foo.drag(mover(foo), dragger);
}
});
};
Is there a way to make this faster without drawing an invisible element over the pieces that I want to make draggable and attaching the handlers to those?

Answer 1

var position;
var rect = paper.rect(20, 20, 40, 40).attr({
cursor: "move",
fill: "#f00",
stroke: "#000"
});
t = paper.text(70,70, 'test').attr({
"font-size":16,
"font-family":
"Arial, Helvetica, sans-serif"
});
var st = paper.set();
st.push(rect, t);
rect.mySet = st;
rect.drag(onMove, onStart, onEnd);
onStart = function () {
positions = new Array();
this.mySet.forEach(function(e) {
var ox = e.attr("x");
var oy = e.attr("y");
positions.push([e, ox, oy]);
});
}
onMove = function (dx, dy) {
for (var i = 0; i < positions.length; i++) {//you can use foreach but I want to show that is a simple array
positions[i][0].attr({x: positions[i][1] + dx, y: positions[i][2] + dy});
}
}
onEnd = function() {}