app grid sorter

by tcghyit

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<ul class="sortable">
    <li id='0' class="droppable">
        <p>Drag me</p></li>
    <li id='1' class="droppable">
        <p>Drag me</p></li>
    <li id='2' class="droppable">
        <p>Drag here</p></li>
    <li id='3' class="droppable">
        <p>Drag me</p></li>
    <li id='4' class="droppable">
        <p>Drag me</p></li>
    <li id='5' class="droppable">
        <p>Drag me</p></li>
</ul>

CSS

.droppable {
    width: 150px;
    height: 150px;
    padding: 0.5em;
    float: left;
    margin: 10px;
    background-color: #eee;
    list-style-type: none;
}
body{
    background-color: grey
}

JavaScript

var tmp = 1;
$(".droppable").each(function () {
    $(this).find("p").prepend("<img src='http://placekitten.com/11" + tmp + "/' /><br>");
    tmp++;
});

function animate($tmpEl,$moveToEl) {
    
    var oldTop = $tmpEl.position().top;
    var oldLeft = $tmpEl.position().left;
    var newTop = $moveToEl.position().top;
    var newLeft = $moveToEl.position().left;
    
    var $clone;
    
    if($tmpEl.data('cloneExists')) {
        $clone = $tmpEl.data('cloneExists');
        $clone.css({backgroundColor: '#ec43ef'});
    } else {
        $clone = $tmpEl.clone().css({
            backgroundColor: '#ec43ef',
            position: 'absolute',
            top: oldTop,
            left: oldLeft
        }).disableSelection();        
        $tmpEl.parent().append($clone);     
        $tmpEl.data('cloneExists',$clone);
        $tmpEl.css('visibility', 'hidden');
    }       

    $clone.stop().animate({
        backgroundColor: '#eee',
        top: newTop,
        left: newLeft
    }, 1000, function () {    
        $clone.remove();
        $tmpEl.css('visibility', '');    
        $tmpEl.data('cloneExists','');      
    });   
}

function shiftElTo(el,destEl) {
          
    var $el = el.jquery?el:$(el);
    var $destEl = destEl.jquery?destEl:$(destEl);
    var elIndex = $el.index();
    var destElIndex = $destEl.index();
    var dir = destElIndex-elIndex;
    var max = Math.max(elIndex,destElIndex);
    var min = Math.min(elIndex,destElIndex);
    var $childrenArray = $el.parent().children();
 
    //shift all els between el and destEl
    for(var i = min;i<=max;i++) {
        var $tmpEl = $childrenArray.eq(i);  
        var index = (dir > 0)?$tmpEl.prev().index():$tmpEl.next().index();   
        var $moveToEl = $childrenArray.eq(index);
          
        if($tmpEl.data('startEl')) { //TODO refactor this section
            var finalEl = (dir > 0)?$childrenArray.eq(max):$childrenArray.eq(min);
            $tmpEl.data("draggable").originalPosition = {
          ...