Fork me on GitHub

Sortable Layout

Drag and drop portlets to different locations

Portlet 1

Lorem Ipsum dummy content

Portlet 2

Lorem Ipsum dummy content

Portlet 3

Lorem Ipsum dummy content

<div id="mySortableLayout">
  <div class="portlet">
    <h4>Portlet 1</h4>
    <p>Lorem Ipsum dummy content</p>
  </div>
  <div class="portlet">
    <h4>Portlet 2</h4>
    <p>Lorem Ipsum dummy content</p>
  </div>
  <div class="portlet">
    <h4>Portlet 3</h4>
    <p>Lorem Ipsum dummy content</p>
  </div>
</div>

YUI().use(
  'aui-sortable-layout',
  function(Y) {
    new Y.SortableLayout(
      {
        dragNodes: '.portlet',
        dropNodes: '#mySortableLayout'
      }
    );
  }
);