SET Drag and Drop SVG example

by Nathan Woods

HTML

<div id="canvas"></div>

JavaScript

var R = Raphael("canvas", 500, 500);
console.log(R);
R.setStart();
var t = R.text(100, 100, 'asdf');
var c = R.rect(50, 50, 100, 100).attr({
    fill: "hsb(.8, 1, 1)",
    stroke: "none",
    opacity: .5
});
var set = R.setFinish();
// -------------------------------------------------------------------------------
var start = function () {
        // storing original coordinates
        set.forEach(function(element, index){
            element.ox = element.attr("x");
            element.oy = element.attr("y");
        });
    },
    move = function (dx, dy) {
        // move will be called with dx and dy
        set.forEach(function(element, index){
            element.attr({x: element.ox + dx, y: element.oy + dy});
        });
    },
    up = function () {
    };
// -------------------------------------------------------------------------------
set.drag(move, start, up);
console.log(set);