Question

I have a jQuery drag and drop based panel working perfectly.

http://jsfiddle.net/pzRgT/

It stores multiple draggable elements over multiple lists. I’m unsure how I would store the order and send that to my server such that I can store the data and load it back later to re-create the order.

How can I store the elements and their order over multiple boxes such that I can “save” and “load” from ajax?

Answer 1

You could add id attributes to the <ul>s to identify the groups, id attributes to the <li>s to identify them. Then spin through the <ul>s when you want to save it and convert the current state to a JavaScript object; once you have that object you can send it back to the server as JSON, unpack it on the server, and store it in your database.

Something like this:

$('#submit').click(function() {
    var groups = { };
    $('.sort').each(function() {
        var a = [ ];
        $(this).find('li').each(function() {
            a.push(this.id);
        });
        groups[this.id] = a;
    });
    // Send groups back to the server using $.ajax()
});

Demo (open your console please): http://jsfiddle.net/ambiguous/FMKmj/