Raphaël JS Demo - Raph drag - custom

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 c = paper.circle(200,200,40).attr('fill', '#80f');

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

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

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