Drag and Drop - Table with Data

Posted on 2009-04-29
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_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?

Question by:Jester_48
    LVL 2

    Accepted Solution

    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:
    You just make a list:
    <ul id="my_sorted_list">
    <li id="table1">table1</li>
    <li id="table2">table2</li>
    and then you make it sortable:
    After that you can get an order with:
    (described here:
    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:
    It's well explained, easy too use, non-obtrusive and quite configurable.
    I hope you like it too!

    LVL 2

    Expert Comment

    Of course, ids have to match. It should have been:
    LVL 2

    Expert Comment

    Do you need any further assistance with that?
    LVL 24

    Author Closing Comment

    not complete

    Featured Post

    Training Course: Java/J2EE and SOA

    This course will cover both core and advanced Java concepts like Database connectivity, Threads, Exception Handling, Collections, JSP, Servlets, XMLHandling, and more. You'll also learn various Java frameworks like Hibernate and Spring.

    Join & Write a Comment

    Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL ( several years ago, it seemed like now was a good time to updat…
    JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
    Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    729 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

    Need Help in Real-Time?

    Connect with top rated Experts

    23 Experts available now in Live!

    Get 1:1 Help Now