Edit in JSFiddle

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 = {
                top :  finalEl.position().top,
                left : finalEl.position().left
             };
        } else {
            animate($tmpEl,$moveToEl);
        }
    }
    
    if(dir<0)
        $el.insertBefore($destEl);
    else
        $el.insertAfter($destEl); 
}

$(".droppable").draggable({
    zIndex: 10000,
    revert: true,
    helper: 'clone',
    distance: 10,
    refreshPositions: true,
    start: function (event, ui) {
        $(this).data('startEl',true).css('visibility', 'hidden');
    },
    stop: function (event, ui) {        
        $(this).removeData('startEl').css('visibility', '');    
    }
}).droppable({
    tolerance: 'pointer',
    over: function (event, ui) {
        shiftElTo(ui.draggable,this);                
    },
    out: function (event, ui) {

    },
    drop: function (event, ui) {

    }
});

$('html').disableSelection();

<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>

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