ALLOY UI - Sortable Layout

// Find a way to lock in place the column titles but still "accept" portlets. Based on : http://alloyui.com/examples/sortable-layout/

HTML

<script src="http://cdn.alloyui.com/3.0.0/aui/aui-min.js"></script>
<link rel="stylesheet" href="http://cdn.alloyui.com/2.5.0/aui-css/css/bootstrap.min.css">
<br>
<br>
<!-- COLUMN 1 -->
<div id="mySortableLayout">
    <div class="portlet portletC">Column 1</div>
    <div class="portlet portlet1">
         <h4>Portlet 1</h4>

        <p>Lorem Ipsum dummy content</p>
    </div>
    <div class="portlet portlet2">
         <h4>Portlet 2</h4>

        <p>Lorem Ipsum dummy content</p>
    </div>
    <div class="portlet portlet3">
         <h4>Portlet 3</h4>

        <p>Lorem Ipsum dummy content</p>
    </div>
</div>
<!-- COLUMN 2 -->
<div id="mySortableLLLayout2">
    <div class="portlet portletC">Column 2</div>
    <div class="portlet portlet1">
         <h4>Portlet 1</h4>

        <p>Lorem Ipsum dummy content</p>
    </div>
    <div class="portlet portlet2">
         <h4>Portlet 2</h4>

        <p>Lorem Ipsum dummy content</p>
    </div>
    <div class="portlet portlet3">
         <h4>Portlet 3</h4>

        <p>Lorem Ipsum dummy content</p>
    </div>
</div>
<!-- COLUMN 3 -->
<div id="mySortableLayout3">
    <div class="portlet portletC">Column 3</div>
</div>
<!-- COLUMN 4 -->
<div id="mySortableLayout4">
    <div class="portlet portletC">Column 4</div>
    <div class="portlet portletGauge">
         <h4>Gauge</h4>

        <p>Lorem Ipsum dummy content</p>
    </div>
</div>
    <br>
    <br>

CSS

body {
    padding: 0 5px;
}
/*.portlet1, .portlet2, .portlet3 {
    border: 1px solid #000;
}*/
 #mySortableLayout, #mySortableLLLayout2, #mySortableLayout3, #mySortableLayout4 {
    width: 24%;
    margin: 0 auto;
    float: left;
    margin-left: 5px;
}
.portlet:hover {
    cursor: pointer;
}
.portlet {
    height: 150px;
}
.portlet1 {
    background-color: tomato;
}
.portlet2 {
    background-color: lightblue;
}
.portlet3 {
    background-color: yellow;
}
.portletC {
    border-top: 1px solid #000;
    height: 1em;
}
.portletGauge {
    background-color: lightgreen;
    height: 310px;
}

JavaScript

YUI().use(
    'aui-sortable-layout',

function (Y) {
    new Y.SortableLayout({
        dragNodes: '.portlet',

    });
});