Draggable panels features permits to move panels with the only use of 2 classes :

  • ClassSortable for the container
  • ClassSort for the panels

When moving a panel, ClassSortPlaceholder class will be used ad the print of the current panel.

<div class="ClassRow ClassSortable" id="mainrow">
    <div class="ClassCellMargin" style="width:50%">
        <div class="ClassCellMargin ClassBorder ClassSort">
            <div class="ClassPanel">
                Panel 1
            </div>
            ...
        </div>
    </div>
    <div class="ClassCellMargin" style="width:50%">
        <div class="ClassCellMargin ClassBorder ClassSort">
            <div class="ClassPanel">
                Panel 2
            </div>
            ...
        </div>
    </div>
</div>

When clicking and holding a panel titlebar, you’ll be able to move it.