Using Snap.svg to create a snapping draggable box

by Gabriel Z

HTML

<script src="//cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>
<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>

JavaScript

var s = Snap("#svg");

var orig = {
    x: 0,
    y: 0
};

var block = s.rect(150, 150, 100, 100, 20, 20);
block.attr({
    fill: "rgb(236, 240, 241)",
    stroke: "#1f2c39",
    strokeWidth: 3
});

block.drag(

function (dx, dy, x, y, e) {
    var xSnap = Snap.snapTo(100, orig.x + dx, 100000000);
    var ySnap = Snap.snapTo(100, orig.y + dy, 100000000);
    this.attr({
        x: xSnap,
        y: ySnap
    });
},

function (x, y, e) {
    orig.x = e.toElement.x.baseVal.value;
    orig.y = e.toElement.y.baseVal.value;
    //origTransform = this.transform().local;
});