Demo
Demo 1
Unrestricted dragging with two sets. The Lorem set can only be dragged from a handle, the Fox set from any of its elements. No element reordering occurs when dragging
Demo 2
Element movement confined to host canvas. Active set is brought to top when dragging starts. Text elements have different alignments. Animations are attached to dragging indicator light elements.
Demo 3
Additional event handler functions added to set drag events. Here they keep track of where cursor was last seen dragging and how many times we've been on the static rectangle while dragging (collision detection). Notice how at least in version 2.1.2 of Raphaël collisions are detected from cursor position rather than element boundaries for raphael.drag.over.<id> events.
Last cursor position when dragging: (0, 0)
Cursor-element collisions: 0