Raphaël JS Demo - jQuery 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: 500px;
}

JavaScript

// Interactions using JQuery events

var paper = Raphael("paper", 400, 400);

// Drag an object around the canvas
var drag = {x: 0, y: 0, state: false};

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

$(c.node).mousedown(function(e) {
  if(!drag.state) {
    c.attr({fill: '#808'});
    drag.x = e.pageX;
    drag.y = e.pageY;
    drag.state = true;
  }
  return false;
});

$(c.node).mousemove(function(e) {
  if(drag.state) {
    c.translate(e.pageX - drag.x, e.pageY - drag.y);
    drag.x = e.pageX;
    drag.y = e.pageY;
  }
});

$(c.node).mouseup(function() {
  c.attr({fill: '#80f'});
  drag.state = false;
});

$(c.node).mouseout(function() {
  $(c.node).mouseup();
});