Raphaël JS Demo - Correct jQuery drag

by craic

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 JQuery events

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

// Drag an object around the canvas
var drag = {
    elem: null,
    x: 0,
    y: 0,
    state: false
};
var delta = {
    x: 0,
    y: 0
};
var c = paper.circle(200,200,40).attr('fill', '#80f');

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

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

      delta.x = e.pageX - drag.x;
      delta.y = e.pageY - drag.y;

      var cur_offset = $(drag.elem).offset();

//      $(drag.elem).offset({
//          left: (cur_offset.left + delta.x),
//          top:  (cur_offset.top + delta.y)
//      });

      c.translate(e.pageX - drag.x, e.pageY - drag.y);
//      $(drag.elem).translate(e.pageX - drag.x, e.pageY - drag.y);

      drag.x = e.pageX;
      drag.y = e.pageY;
 
  }
});

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