Drag and Drop - Table with Data

I have a db query which outputs a photogallery for editing, the daat is inserted into a table with the following layout

IMAGE
IMAGE_NAME (text input)
IMAGE_NAME_FR (text input)
IMAGE_CAPTION (text input)
IMAGE_CAPTION_FR (text input)

pus a couple of hidden fields, the table is floated to the left and each entry in the gallery generates a table and floats it up against the previously generated table, i now need to add a sorting option(new requirement), i would like to implement it as a drag and drop that would store the resequenced tables in an array which i could then submit with the text edits to reorganize the image display sequence any script suggestions? code samples?


TIA
LVL 25
James RodgersWeb Applications DeveloperAsked:
Who is Participating?
 
majkiwConnect With a Mentor Commented:
I'm not sure if I understand what do you want to sort:

A. tables in list (i think that's what you mean)
Use scriptaculous:
http://wiki.github.com/madrobby/scriptaculous/sortable
You just make a list:
<ul id="my_sorted_list">
<li id="table1">table1</li>
<li id="table2">table2</li>
</ul>
and then you make it sortable:
<script>Sortable.create("list");</script>
After that you can get an order with:
Sortable.serialize("list");
(described here: http://wiki.github.com/madrobby/scriptaculous/sortable-serialize)
Be sure to check out demos of both and the source codes

B. rows of tables
I like this jquery plugin for doing drag'n'drop sorting of table rows:
http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/
It's well explained, easy too use, non-obtrusive and quite configurable.
I hope you like it too!

0
 
majkiwCommented:
Of course, ids have to match. It should have been:
Sortable.create("my_sorted_list");
Sortable.serialize("my_sorted_list");
0
 
majkiwCommented:
Do you need any further assistance with that?
0
 
James RodgersWeb Applications DeveloperAuthor Commented:
not complete
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.