Jquery Drag/drop in php+mysql

Question

I am looking quite long for a solution for this. I found a great demo by Nathan Smith, using jQuery and interface to drag and drop favourites into a list.

The demo is here: http://host.sonspring.com/dragdrop/

But how can I save the list to mysql database.

Answer 1

Use ajax to call a server side (php) script when an item is dropped. Pass that script the order of the table so it could update your MySQL.

P.S - You can also use jQuery UI for the drag/drop, it's very flexible.

Answer 2

I use a drag and drop within a form, so instead of saving on each 'drop' I just use the simplest route by populating a hidden field with the selected items. To do this make sure to assign an id to your list items.

So if the selected list looks like:

<div id='selected_items'>
    <ul>        
        <li id='123'>Item 1</li>
        <li id='456'>Item 2</li>
    </ul>
</div>

Then just iterate over the list and save to a hidden input when the user clicks save:

$("#save").click(function(){
    var theList = '';
    $("selected_items > li").each(function(){
        var $this = $(this);
        var currentID = $this.attr("id");
        theList = theList+currentID+'|'; 
    });
    $("#hidden_list").val(theList);
});