Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

120 lines (108 sloc) 5.121 kb
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="" lang="en" xml:lang="en">
Raphaelle drag and drop demonstration
<script src="jquery.js" type="text/javascript"></script>
<script src="raphael.js" type="text/javascript"></script>
<script src="raphaelle.js" type="text/javascript"></script>
<style type="text/css" rel="stylesheet" media="screen">
#frame {
position: absolute; overflow: auto;
border: 1px solid #0F0;
top: 10px; left: 10px; right: 10px; bottom: 10px;
#content { position: absolute; overflow: auto; top: 0; right: 0; bottom: 0; left: 0; }
#help {
position: absolute;
bottom: 20px; left: 20px;
<div id="frame">
<div id="content"></div>
<div id="help">
This example demonstrates the following behaviours using three objects (resizable, rubber-handle, movable):
<li>All objects that support drag produce "click" if you release without dragging. (BUG: also when you did drag)</li>
<li>One object is a normal draggable (default behaviour), the others resize & rubber-band (custom behaviour).</li>
<li>The top-left rectangle has a large "reluctance", meaning the resize doesn't start after 3 pixels.</li>
<li>Releasing a drag over other objects alerts the name of the object dropped on (hit testing).</li>
<li>The bottom right shape has a transparent fill, so you can drag and drop in there.</li>
<li>Dragging supports cancellation without dropping by hitting the "Escape" key.</li>
<li>the canvas resizes to fill the browser window.</li>
<li>shift-key dragging the rubber-handle moves it, instead of rubber-banding.</li>
<li>meta-key drag on the rubber-handle is disabled, but if you lift the metakey while still dragging, the drag starts.</li>
<li>the resizable rectangle has a minimum size enforced in the code.</li>
<script type="text/javascript">
$(document).ready(function() {
paper = Raphael('content', "100%", "100%");
paper.canvas.raphael = paper; // .raphael is set for elements but not for the canvas = "paper"; // For messages
// A simple movable shape. It has a transparent filled background so
// you can drag by clicking in the centre, but still see through:
var moveable = paper
.rect(200, 200, 40, 20, 10)
.attr({fill: "#000", "fill-opacity": 0, stroke: "#009", "stroke-width": 3}); = "moveable"; // For messages
moveable.draggable(); { alert("moveable clicked!"); });
// Create a rubber band line from this point to the start point
var rubberBand = function(from_x, from_y, to_x, to_y) {
var rubber_x = 0, rubber_y = 0;
var rubber_band = paper.path("M0 0").attr({stroke: "#000", "stroke-width": 2});
rubber_band.dragUpdate = function(draggingOver, dx, dy, event) {
rubber_x += dx; rubber_y += dy;
rubber_band.attr({path: "M"+from_x+" "+from_y+"L"+rubber_x+" "+rubber_y});
rubber_band.dragUpdate(null, to_x, to_y);
rubber_band.dragFinish = function(dropped_on, x, y, event) {
if (dropped_on)
alert("Dropped on "+(dropped_on.raphael ? : dropped_on.tagName));
rubber_band.dragCancel = function() {
return rubber_band;
// When you drag from this handle, a rubber band line appears:
var rubber_handle = paper
.circle(200, 30, 4)
.attr({"stroke-width": 4, fill: "#F00"});
rubber_handle.dragStart = function(x, y, start_event, event) {
// start_event is the original mousedown, not the current move
if (event.metaKey) return null; // Don't start the drag until the metaKey is lifted
if (event.shiftKey) return this; // A shift-drag moves the handle instead of rubber banding
var rubber_band = rubberBand(rubber_handle.attr("cx"), rubber_handle.attr("cy"), x, y);
rubber_band.toBack(); // Drag behind other objects
return rubber_band;
rubber_handle.draggable({reluctance: 1}); { alert("rubber_handle clicked!"); }); = "rubber_handle"; // For messages
// Demonstrate a resizable object with a minimum size
var resizable = paper
.rect(5, 20, 100, 40, 10)
.attr({fill: "#EEF", "fill-opacity": 0.7, stroke: "#009", "stroke-width": 3}); = "resizable";
resizable.dragUpdate = function(draggingOver, dx, dy, event) {
var new_width = resizable.attrs.width + dx;
var new_height = resizable.attrs.height + dy;
if (new_height < 20) new_height = 20;
if (new_width < 20) new_width = 20;
resizable.attr({width: new_width, height: new_height });
resizable.clicked = function(e) { alert("resizable clicked!"); };;
resizable.draggable({reluctance: 20}); // Be reluctant to start resizing = "resizable"; // For messages
Jump to Line
Something went wrong with that request. Please try again.