How can I update a list order in real time?

Question

I'm using Media Box Advanced as a layover tool, which is very powerful and convenient because it accepts any media, and takes any list and automatically reads the number of <li> and their order.

I have introduced a draggable functionality to these lists, reordering them using jquery .draggable. They can also be dragged from one UL to another. However, when I then click on these to pop up the lightbox, the order has not changed. My question is the following:

1) How do I get the page to read these changes in real time and reorder the lightbox?

2) Is there a way to make these changes permanent?

3) The lightbox categorizes galleries by the <a> tags within the <li> (<a rel="lightbox[category]"). Is there a way to change the setting of the <li> when they are dragged from one <ul> to another? Like if they are dragged from UL1 to UL2, how do I update the <a rel> tag to reflect that?

Here is the web page: http://www.senseculture.com/timeline_new.html

Here is the draggable code I'm using:

<script>
  $(function() {
        $( "#sortable1, #sortable2" ).sortable({
            connectWith: ".timeline_content"
        }).disableSelection();
    });
</script>

Thanks!

Answer 1

1) This was solved by reading through the .js of the lightbox (mediaboxadvanced) and finding the function that loads the UL's into a lightbox. Each time the lists are ordered, the lightbox is recalculated:

$( "#sortable1, #sortable2, #my_timeline" ).sortable({
update: function(event, ui) {
    Mediabox.scanPage();
}
});

2) This can be done with PHP: jQuery Connected Sortable Lists, Save Order to MySQL

3) Same as 1), on "receive", make each lightbox list attach a "rel" argument to each "a" tag. To prevent it from changing the "rel" tag of non sortable list items, I've added a function to make sure their "rel" tags remain empty.

$( "#sortable1, #sortable2, #my_timeline" ).sortable({
update: function(event, ui) {
    Mediabox.scanPage();
}
receive: function(event, ui) {

        $(".timeline_content").each(function(i) {
        $(this).find("a").attr("rel", "lightbox[set" + (i+1) + "]");
        });
        $(".non_sortable").each(function(i) {
        $(this).find("a").attr("rel", ""); 
        });
}
});

Answer 2

1. If you are wanting to take action when an item has been moved, you should create a handler for the "Update" event of .sortable(). Here is a post about this topic
2. To make the
3. always load in a specific order, you will have to attach an ordinal field to each item, then sort the
4. based on that. You will have to update the datasource with the corresponding ordinal value after the change has completed, this will ensure that the changes are concrete.

5. This will involve modifying the attributes of the given element in the Update handler for sortable(). Here is the API docs, with events towards the bottom Something like:

   $(this).attr({rel: "whateverHere"});