JQUERY UI SORTABLE - LIKE PACKERY - BIZAMAJIG USAGE

by bizamajig

HTML

<ul id="original_items">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<ul id="cloned_items">
</ul>

CSS

#original_items, #cloned_items {
    list-style: none;
}

#original_items li {
/*
    float: left;
*/
    position: relative;
    z-index: 5;
}

ul li {
    margin: 3px 3px 3px 0;
    padding: 1px;
    width: 100px;
    height: 90px;
    font-size: 4em;
    text-align: center;
    border: solid 1px #333;
    background-color: #eaa10e;
}

#cloned_items li {
    position: absolute;
    z-index: 1;
}

JavaScript

$(function(){

    // loop through the original items...
    $("#original_items li").each(function(){

        // clone the original items to make their
        // absolute-positioned counterparts...
        var item = $(this);
        var item_clone = item.clone();
        // 'store' the clone for later use...
        item.data("clone", item_clone);

        // set the initial position of the clone
        var position = item.position();
        item_clone.css("left", position.left);
        item_clone.css("top", position.top);

        // append the clone...
        $("#cloned_items").append(item_clone);
    });

    // create our sortable as usual...
    // with some event handler extras...
    $("#original_items").sortable({

        // on sorting start, hide the original items...
        // only adjust the visibility, we still need
        // their float positions..!
        start: function(e, ui){
            // loop through the items, except the one we're
            // currently dragging, and hide it...
            ui.helper.addClass("exclude-me");
            $("#original_items li:not(.exclude-me)")
                .css("visibility", "hidden");

            // get the clone that's under it and hide it...
            ui.helper.data("clone").hide();
        },

        stop: function(e, ui){
            // get the item we were just dragging, and
            // its clone, and adjust accordingly...
            $("#original_items li.exclude-me").each(function(){
                var item = $(this);
                var clone = item.data("clone");
                var position = item.position();

                // move the clone under the item we've just dropped...
                clone.css("left", position.left);
                clone.css("top", position.top);
                clone.show();

                // remove unnecessary class...
                item.removeClass("exclude-me");
            });

            // make sure all our original items are visible...