simple sortable mirror

based on a SO thread : http://stackoverflow.com/questions/18958681/jquery-ui-sortable-list-mirror

HTML

<ul id="gallery">
   <li>Img 1</li>
   <li>Img 2</li>
   <li>Img 3</li>    
   <li>Img 4</li>        
</ul>

<ul id="thumbnails">
   <li>Img 1 thumb</li>
   <li>Img 2 thumb</li>
   <li>Img 3 thumb</li>
   <li>Img 4 thumb</li>     
</ul>

JavaScript

var originalIndex, originalIndex1;
var newIndex, newIndex1;

var originalImage, originalImage1;
var newImage, newImage1;

var gallery = $("#gallery");
var thumb = $("#thumbnails");

$("#thumbnails").sortable({
    start:function(ev,ui){
        originalIndex = ui.item.index();
        originalImage = gallery[0].children[originalIndex];
    },
    stop:function(ev,ui){
        newIndex = ui.item.index();
        newImage = gallery[0].children[newIndex];        
        if(originalIndex < newIndex){
            $(newImage).after(originalImage);
        }else{
            $(newImage).before(originalImage);
        }
    }  
});
$("#gallery").sortable({
    start:function(ev,ui){
        originalIndex1 = ui.item.index();
        originalImage1 = gallery[0].children[originalIndex1];
    },
    stop:function(ev,ui){
        newIndex1 = ui.item.index();
        newImage1 = gallery[0].children[newIndex1];        
        if(originalIndex1 < newIndex1){
            $(newImage1).after(originalImage1);
        }else{
            $(newImage1).before(originalImage1);
        }
    }
});