<script type="text/javascript" src="http://www.fluidproject.org/releases/1.0/InfusionAll.js"></script>
<style>
.portlet {
width: 75px;
height: 40px;
background-color: lightyellow;
padding: 10px;
margin: 0 10px 10px 0 !important;
text-align: center;
}
table#portlet-reorderer-root{
border: 1px solid black;
}
table#portlet-reorderer-root td {
padding: 8px;
vertical-align: top;
border: 1px solid black;
}
#portlet-reorderer-root .fl-reorderer-movable-default{
border: 2px solid #ddd;
}
#portlet-reorderer-root .fl-reorderer-movable-hover{
border: 2px solid #666;
}
#portlet-reorderer-root .fl-reorderer-movable-dragging{
background-color: white;
}
#portlet-reorderer-root .fl-reorderer-movable-selected{
border: 2px solid #666;
background-color: #ddd;
}
#portlet-reorderer-root .fl-reorderer-movable-avatar {
height: 25px;
width: 50px;
background-color: blue;
opacity: 0.75;
}
#portlet-reorderer-root .fl-reorderer-dropMarker{
height: 4px !important;
width: 80px;
background-color: green;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function () {
fluid.reorderLayout ("#portlet-reorderer-root",
);
});
</script>
<table id="portlet-reorderer-root">
<tbody>
<tr>
<td id="c1">
<div class="portlet" id="portlet1">
<div class="title">portlet 1</div>
<div class="content"> </div>
</div>
<div class="portlet" id="portlet2">
<div class="title">portlet 2</div>
<div class="content"> </div>
</div>
<div class="portlet" id="portlet3">
<div class="title">portlet 3</div>
<div class="content"> </div>
</div>
</td>
<td id="c2">
<div class="portlet" id="portlet4">
<div class="title">portlet 4</div>
<div class="content"> </div>
</div>
</td>
<td id="c3">
<div class="portlet" id="portlet5">
<div class="title">portlet 5</div>
<div class="content"> </div>
</div>
<div class="portlet" id="portlet6">
<div class="title">portlet 6</div>
<div class="content"> </div>
</div>
</td>
<td id="c4">
</td>
</tr>
</tbody>
</table>