Raphaël JS Demo - Raphael drag

HTML

<script src="http://ajax.cdnjs.com/ajax/libs/raphael/1.5.2/raphael-min.js"></script>
<div id="paper"></div>

CSS

#paper {
    background-color: #f0f0f0; 
    width: 400px;
    height: 400px;
}

JavaScript

// Interactions using Raphael events, instead of JQuery
var paper = Raphael("paper", 400, 400);

var start = function () {
    // storing original coordinates
    this.ox = this.attr("cx");
    this.oy = this.attr("cy");
    this.attr({opacity: 0.9});
},
move = function (dx, dy) {
    // move will be called with dx and dy
    this.attr({cx: this.ox + dx, cy: this.oy + dy});
}

var c = paper.circle(200,200,40).attr('fill', '#0F0');

c.drag(move, start);