animate to Orig

HTML

<div id="container">
        <ul id="contianerUl">
            <li style="width:100px;height:50px;" class="dragdrop"></li>
            <li style="width:200px;height:50px;" class="dragdrop"></li>
            <li style="width:200px;height:60px;" class="dragdrop"></li>
            <li style="width:300px;height:20px;" class="dragdrop"></li>
            <li style="width:400px;height:60px;" class="dragdrop"></li>
            <li style="width:300px;height:30px;" class="dragdrop"></li>
            <li style="width:500px;height:70px;" class="dragdrop"></li>
            <li style="width:200px;height:50px;" class="dragdrop"></li>
            <li style="width:300px;height:50px;" class="dragdrop"></li>
            <li style="width:400px;height:40px;" class="dragdrop"></li>
        </ul>
    </div>

CSS

*{margin:0;padding:0;}
    #container{width:960px;height:570px;margin:0 auto;padding-top:30px;}
    #contianerUl{display: block;width:960px;height:600px;}
    #contianerUl li{display: block;list-style: none;float:left;border:1px solid #ccc;}
    .black{background:#ccc}

JavaScript

$(".dragdrop").draggable({
    
    revert: "invalid",
    start: function(event, ui) {
        ui.helper.data({
            'original-position': ui.offset,
            'origWidth': $(this).width(),
            'origHeight': $(this).height()
        });
    }
});
$(".dragdrop").droppable({
    hoverClass: "black",
    tolerance: "pointer"
});

$(".dragdrop").on('drop', function(event, ui) {
    var origLeft = ui.helper.data('original-position').left,
        origTop = ui.helper.data('original-position').top,
        origWidth = ui.helper.data('origWidth'),
        origHeight = ui.helper.data('origHeight'),
        newLeft = $(event.target).offset().left,
        newTop = $(event.target).offset().top,
        newWidth = $(event.target).width(),
        newHeight = $(event.target).height();

    $(event.target).css("position", "absolute").animate({
        "left": origLeft,
        "top": origTop,
        "width": origWidth,
        "height": origHeight,
    }, 500, function() {
        ui.draggable.css("position", "absolute").animate({
            "left": newLeft,
            "top": newTop,
            "width": newWidth,
            "height": newHeight
        }, 500).css({
            "position": "",
            "float": 'left',
            'left': "",
            'top': ''
        })
    }).css({
        "position": "",
        "float": 'left',
        'left': "",
        'top': ''
    })



})