Question

I have the following code. What I want to know is what moved from #files to #gallery and vice versa. That way I send over what has changed and do not tie up the back end doing the work.

$( "#files, #gallery" ).sortable({
  connectWith: ".connectedSortable",
  update : function () {
    alert($(this).sortable('serialize'));
  }
});

<ul id="files" class="connectedSortable">
<li id="g_1">G1</li>
<li id="g_2">G1</li>
<li id="g_3">G1</li>
<li id="g_4">G1</li>
</ul>

<div class="clear:both;"></div>

<ul id="gallery" class="connectedSortable"></ul>

Answer 1

If you want to compare them you’ll have to store an initial state, you can use 'toArray' to return an array to compare. Here’s using 'serialize'

var $files_init, $gallery_init, options = {
connectWith: ".connectedSortable",
    create : function (){
           window['$'+this.id+'_init'] = $(this).sortable('serialize');
        console.log(window['$'+this.id+'_init']);
    },
    update : function () {
           alert($(this).sortable('serialize'));
        console.log(window['$'+this.id+'_init']);
    }
};
$( "#files, #gallery" ).sortable(options);​

I’m using some trickery here, using dynamic variable names in the create & update functions. now you just need a way to compare them. Here’s a JSfiddle http://jsfiddle.net/G5sxn/3/ demonstrating with the help of the talented John Resig’s diffString function.

With PHP you could just do array_diff to compare them, but I don’t know of a reliable way to do it in JS. I’ve been futzing around but I’m not sure the best way to do it.

​also, you were missing an end-bracket for your update function.