Sortable Sort and Reorder

by TheFiddler

HTML

<ul id="sortable">
   <li id="1">Div 1</li>
   <li id="2">Div 2</li>
   <li id="3">Div 3</li>
</ul>

<div id="div_container">
  <div id="div1">Div 1 item</div>
  <div id="div2">Div 2 item</div>
  <div id="div3">Div 3 item</div>
</div>

CSS

ul {
    float: left;
}
div {
    float: left;
}
div div {
    width: 100px;
    height:100px;
    background-color: yellow;
    border: 1px solid black;
}
li {
  background-color: red;
  margin: 2;
    width: 200px;
    height: 20px;
}

JavaScript

var indexBefore = -1;

function getIndex(itm, list) {
    var i;
    for (i = 0; i < list.length; i++) {
        if (itm[0] === list[i]) break;
    }
    return i >= list.length ? -1 : i;
}

$('#sortable').sortable({
    start: function(event, ui) {
        indexBefore = getIndex(ui.item, $('#sortable li'));
    },
    change: function(event, ui) {
        var indexAfter = getIndex(ui.item,$("#sortable li")); 
    },
   stop: function(event, ui) {
       var indexAfter = getIndex(ui.item,$("#sortable li")); 
       if (indexBefore==indexAfter) return;
       if (indexBefore<indexAfter) {
           $($("#div_container div")[indexBefore]).insertAfter(
               $($("#div_container div")[indexAfter]));
       }
       else {
           $($("#div_container div")[indexBefore]).insertBefore(
               $($("#div_container div")[indexAfter]));
       }
   }
});

$('#div_container').sortable({
    start: function(event, ui) {
        indexBefore = getIndex(ui.item, $('#div_container div'));
    },
    change: function(event, ui) {
        var indexAfter = getIndex(ui.item,$("#div_container div")); 
    },
   stop: function(event, ui) {
       var indexAfter = getIndex(ui.item,$("#div_container div")); 
       if (indexBefore==indexAfter) return;
       if (indexBefore<indexAfter) {
           $($("#sortable li")[indexBefore]).insertAfter(
               $($("#sortable li")[indexAfter]));
       }
       else {
           $($("#sortable li")[indexBefore]).insertBefore(
               $($("#sortable li")[indexAfter]));
       }
   }
});