Drag & Drop Sortable Elements

[Jonathan Rowley]

Does anyone know of a way to drag and drop svg elements within a Raphael paper and move the element underneath up or down. The same functionality as jqueryui sortable on a html list?

I want to reorder a bar chart on the clientside.

Thanks

[charles thomas]

J

have you used a div for your Raphael canvas?

I'm wondering if you can go ahead using the jQuery UI Sortable plugin

$(
 "#divForRaphaelCanvas" ).sortable();

It would be an interesting experiment. In raphael we can get equivalent dom objects by refering to them as nodes?

C

---

From: Jonathan Rowley <j.rowle...@gmail.com>
To: raph...@googlegroups.com
Sent: Sunday, April 29, 2012 5:30:10 PM
Subject: Drag & Drop Sortable Elements

Does anyone know of a way to drag and drop svg elements within a Raphael paper and move the element underneath up or down. The same functionality as jqueryui sortable on a html list?

I want to reorder a bar chart on the clientside.

Thanks

--
You received this message because you are subscribed to the Google Groups "Raphaël" group.
To view this discussion on the web, visit https://groups.google.com/d/msg/raphaeljs/-/4ZZU9GNdH_gJ.
To post to this group, send an email to raph...@googlegroups.com.
To unsubscribe from this group, send email to raphaeljs+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/raphaeljs?hl=en-GB.

[Jonathan Rowley]

Hi C,

Doesn't work. :(

see: http://jsfiddle.net/JonRowley/U89DY/1/

That would have been brilliant. So looks like its the jquery source for me and adding support for SVG / VML!

Unless anyone has any other ideas?

Thanks!

On Tuesday, 1 May 2012 11:58:12 UTC+1, chasbeen wrote:

J

have you used a div for your Raphael canvas?

I'm wondering if you can go ahead using the jQuery UI Sortable plugin

$(
 "#divForRaphaelCanvas" ).sortable();

It would be an interesting experiment. In raphael we can get equivalent dom objects by refering to them as nodes?

C

Does anyone know of a way to drag and drop svg elements within a Raphael paper and move the element underneath up or down. The same functionality as jqueryui sortable on a html list?

I want to reorder a bar chart on the clientside.

Thanks

--
You received this message because you are subscribed to the Google Groups "Raphaël" group.
To view this discussion on the web, visit https://groups.google.com/d/msg/raphaeljs/-/4ZZU9GNdH_gJ.
To post to this group, send an email to raph...@googlegroups.com.

To unsubscribe from this group, send email to raphaeljs+unsubscribe@googlegroups.com.

[Chris Williams]

I have several pages with up to a dozen raphael charts on them, and they drag and drop using jquery's sortable, just fine.

To view this discussion on the web, visit https://groups.google.com/d/msg/raphaeljs/-/lS-elfeZH5cJ.

To post to this group, send an email to raph...@googlegroups.com.

To unsubscribe from this group, send email to raphaeljs+...@googlegroups.com.

[Jonathan Rowley]

Do you have an example bit of code or website?

Did you look at my jsfiddle example?

Many thanks

[Chris Williams]

You don't understand how "sortable" works.  It takes a series of list items (which can be divs) and allows you to rearrange them.  The divs can contain Raphael stuff if you like.  Check out http://jqueryui.com/demos/sortable/

You can also check out jqueryui's draggable and other interactions.

Your fiddle doesn't work because a) it's not a list, b) the two Raphael drawings are in one div, c) it doesn't include the necessary jqueryui components (e.g. core, widget, mouse).

My stuff is not publicly available, but you don't need me.  Jqueryui has enough sample code to get you going.

Play with the jqueryui stuff first, get it working, then plop your Raphael into it.

To view this discussion on the web, visit https://groups.google.com/d/msg/raphaeljs/-/SJ-kdrUTWz0J.

To post to this group, send an email to raph...@googlegroups.com.

To unsubscribe from this group, send email to raphaeljs+...@googlegroups.com.

[Jonathan Rowley]

Oh,

So you are talking about separate SVG papers being sortable. I know how the jquery.sortable() function works. Maybe I wasn't clear in my original post. I want to have 'rows' (rectangles in this example) that are sortable within a single SVG element (Raphel paper). So for example a bar graph can be sorted on the client pc.

So it does look like i'm going to have to hack around the jqueryui sortable source code to get it to do what I want.

Thanks anyway.