SORTABLE - PORTLET - ROLL YOUR OWN

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css">
<div id="content">
    <div class="portlet">
        <div class="portlet-header"><h6>Portlet 1</h6></div>
        <div class="portlet-content">Content Content Content Content Content Content Content Content</div>
    </div>
    
    <div class="portlet">  
        <div class="portlet-header"><h6>Portlet 2</h6></div>
        <div class="portlet-content">Content Content Content Content Content Content Content Content</div>
    </div>
    
    <div class="portlet fixed">  
        <div class="portlet-header"><h6>Portlet 3 (fixed)</h6></div>
        <div class="portlet-content">Content Content Content Content Content Content Content</div>
    </div>
    
    <div class="portlet">  
        <div class="portlet-header"><h6>Portlet 4</h6></div>
        <div class="portlet-content">Content Content Content Content Content Content Content Content</div>
    </div>
    
    <div class="portlet">  
        <div class="portlet-header"><h6>Portlet 5</h6></div>
        <div class="portlet-content">Content Content Content Content Content Content Content Content</div>
    </div>
    
    <div class="portlet">  
        <div class="portlet-header"><h6>Portlet 6</h6></div>
        <div class="portlet-content">Content Content Content Content Content Content Content Content</div>
    </div>
    
</div>

<div id="cloned_items"></div>

CSS

#content
{
    z-index: 5;
}
.portlet 
{ 
    margin: 0 15px 15px 0; 
    height: 240px;
    width: 25%;
    float:left;
    overflow-x: none;
    position: relative;
}
.portlet-header 
{ 
    margin: 0.3em; 
    padding-bottom: 4px; 
    padding-left: 0.2em; 
}
.portlet-header .ui-icon { float: right; }
.portlet-content { padding: 0.4em; overflow-x: none;}
.ui-sortable-placeholder * { visibility: hidden; background-color: rgb(242, 245, 247); }

#cloned_items {
}

#cloned_items div.portlet {
    position: absolute!important;
    z-index: 1;
}