Sortable Demo.

This demo uses sortable and sorts out the various div's on the resultant page which belong to the same group.

by shivkumarganesh

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
    <div class="column" id="column1">
        <div class="dragbox" id="item1" >
            <h2>Handle 1</h2>
            <div class="dragbox-content" >
                <!-- Panel Content Here -->
            </div>
        </div>
        <div class="dragbox" id="item2" >
            <h2><span class="configure" ><a href="#" >Configure</a></span>Handle 2</h2>
            <div class="dragbox-content" >
                <!-- Panel Content Here -->
            </div>
        </div>
        <div class="dragbox" id="item3" >
            <h2>Handle 3</h2>
            <div class="dragbox-content" >
                <!-- Panel Content Here -->
            </div>
        </div>
    </div>
    <div class="column" id="column2" >
        <div class="dragbox" id="item4" >
            <h2>Handle 4</h2>
            <div class="dragbox-content" >
                <!-- Panel Content Here-->
            </div>
        </div>
        <div class="dragbox" id="item5" >
            <h2>Handle 5</h2>
            <div class="dragbox-content" >
                <!--Panel Content Here-->
            </div>
        </div>
    </div>

CSS

.column{
    width:49%;
    margin-right:.5%;
    min-height:300px;
    background:#fff;
    float:left;
}
.column .dragbox{
    margin:5px 2px  20px;
    background:#fff;
    position:relative;
    border:1px solid #ddd;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
.column .dragbox h2{
    margin:0;
    font-size:12px;
    padding:5px;
    background:#f0f0f0;
    color:red;
    border-bottom:1px solid #eee;
    font-family:Verdana;
    cursor:move;
}
.dragbox-content{
    background:#fff;
    min-height:100px; margin:5px;
    font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column  .placeholder{
    background: #CCC;
    border:1px dashed #ddd;
}
.dragbox h2.collapse{
    background:#f0f0f0 url('collapse.png') no-repeat top right;
}
.dragbox h2 .configure{
    font-size:11px; font-weight:normal;
    margin-right:30px; float:right;
}

JavaScript

$('document').ready(
    $('.column').sortable({
        connectWith:'.column',
        handle:'h2',
        cursor:'move',
         placeholder:'placeholder',       
        forcePlaceholderSize:true,
        opacity:0.4,
        revert:true
        
    }).disableSelection()


);