Untitled


<style>
        .demo {width:800px; margin: 0 auto;}
        #sortable { list-style-type: none; margin: 0; padding: 0; position:relative;}
        li {margin: 3px 3px 3px 0; padding: 1px; font-size: 4em; text-align: center; }

        .ui-state-default, { border: 1px solid #cccccc; background: #f6f6f6 url(images/ui-bg_glass_100_f6f6f6_1x400.png) 100% 100% repeat-x; font-weight: bold; color: #1c94c4; }
        .ui-state-highlight { height: 1.5em; line-height: 1.2em; }

        .one{width: 100px; height: 100px; float:left; clear:both;}
        .two {width: 50px; height: 50px; float:right; clear:both;}
        .three {width: 50px; height: 50px; float:right; clear:both;}
        .four {width: 25px; height: 25px; float:left; clear:both;}
        .five {width: 25px; height: 25px; float:left;}
        .six {width: 25px; height: 25px; float:left;}
        .seven {width: 25px; height: 25px; float:left;}

        .big {margin: 3px 3px 3px 0; padding: 1px; float: left; width: 200px; height: 190px; text-align: center; overflow: hidden;}
        .medium {margin: 3px 3px 3px 0; padding: 1px; float: left; width: 150px; height: 145px; text-align: center; overflow:hidden;}
        .small {margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 100px; text-align: center; overflow: hidden;}

        .high { position: relative; width:500px; height:200px; }
        .right { position:relative; width:400px; height:150px; }
        .low { position:relative; width:750px; height:100px; }

</style>

</head>
<body>

<div class="demo">

<ul class="box high">
        <li class="ui-state-default big"><div rel="item" id="1">1</div></li>
        </ul>

<ul class="box right">
        <li class="ui-state-default medium"><div rel="item" id="2">2</div></li>
        <li class="ui-state-default medium"><div rel="item" id="3">3</div></li>
</ul>

<ul class="box low">
        <li class="ui-state-default small"><div id="4">4</div></li>
        <li class="ui-state-default small"><div id="5">5</div></li>
        <li class="ui-state-default small"><div id="6">6</div></li>
        <li class="ui-state-default small"><div id="7">7</div></li>
</div>

<script type="text/javascript">

var $j = jQuery.noConflict();

$j( ".box" ).sortable({
        connectWith: ".box"
        });

$j( ".box" ).disableSelection();


$j( ".high" ).sortable({ update: function(event, ui) {
        render();
        style();
}});

$j( ".right" ).sortable({ update: function(event, ui) {
        render();
        style();
}});

$j( ".low" ).sortable({ update: function(event, ui) {
        render();
        style();
}});


function render() {

        var uls = $j('ul');

        var lis1 = $j(uls[0]).children('li');
        var lis2 = $j(uls[1]).children('li');
        var lis3 = $j(uls[2]).children('li');

        if (lis1.length == 0) {
                uls[0].appendChild(lis2[0]);
        };

        if (lis1.length == 2) {
                $j(lis1[1]).insertBefore($j(lis2[0]));
        };

        if (lis2.length == 1) {
                uls[1].appendChild(lis3[0]);
        };

        if (lis2.length == 3) {
                $j(lis2[2]).insertBefore($j(lis3[0]));
        };
}

function style() {
        var uls = $j('ul');

        var lis1 = $j(uls[0]).children('li');
        var lis2 = $j(uls[1]).children('li');
        var lis3 = $j(uls[2]).children('li');

        for (i=0; i<=lis1.length; i++) {
                $j(lis1[i]).attr("class", "ui-state-default big");
        };

        for (i=0; i<=lis2.length; i++) {
                $j(lis2[i]).attr("class", "ui-state-default medium");
        };

        for (i=0; i<=lis3.length; i++) {
                $j(lis3[i]).attr("class", "ui-state-default small");
        };

}


</script>