I have a jQuery drag and drop based panel working perfectly.
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?
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/