Making paths and images draggable in Raphael js

Question

Is it possible to be able to drag and drop objects other than just circles and rectangles around a page using Raphael js?

I want to add in paths and images which you can

Answer 1

I experimented with this a little while ago, and got it working using the following approach:

• Add an initially hidden, styled, absolutely positioned div with a transparent background and suitable border styling to your page, and using jQuery/UI make it draggable.
• Add a click event to each of the Rapahel/SVG elements you wish to be draggable, and in this event add code to resize and reposition the div over the element which has just been clicked and then make it visible.
• Add code to the div which updates the position of the Raphael element when it is dragged.

I extended this to add resizing capabilities, and this also worked well, but going forward it would be great to see drag, drop and resize capabilities (ideally properly integrated into the library rather than using jQuery) built into Raphael, as these features would open up a whole bunch of possibilities for in-browser designers using pure Raphael.