?
Solved

Drag and Drop - Table with Data

Posted on 2009-04-29
4
Medium Priority
?
187 Views
Last Modified: 2013-11-19
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
0
Comment
Question by:James Rodgers
  • 3
4 Comments
 
LVL 2

Accepted Solution

by:
majkiw earned 1500 total points
ID: 24263224
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
 
LVL 2

Expert Comment

by:majkiw
ID: 24263259
Of course, ids have to match. It should have been:
Sortable.create("my_sorted_list");
Sortable.serialize("my_sorted_list");
0
 
LVL 2

Expert Comment

by:majkiw
ID: 24292944
Do you need any further assistance with that?
0
 
LVL 25

Author Closing Comment

by:James Rodgers
ID: 31576035
not complete
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question