Sortable Layout

• Introduction
• Basic Example
• Real World Example

Enables a layout with draggable/droppable functionality.

Getting Started

First load the seed and CSS files, if you haven't yet.

<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="https://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Then initialize AlloyUI and load the Sortable Layout module.

YUI().use(
  'aui-sortable-layout',
  function(Y) {
    // code goes here
  }
);

Using Sortable Layout

Create an HTML element with some content nodes:

<div id="mySortableLayout">
  <div class="contentNode">
    <p>Some content</p>
  </div>
  <div class="contentNode">
    <p>Other content</p>
  </div>
  <div class="contentNode">
    <p>More content</p>
  </div>
</div>

Now create a new instance of Sortable Layout component by setting dropNodes to our HTML element's selector. Also, set dragNodes to the content nodes' class so Sortable Layout can make the nodes draggable.

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

Configuring Sortable Layout

There are some other optional parameters that you can pass to your Sortable Layout instance.

For example, you can add a proxyNode which will act as a temporary node during activeDrag mode and be replaced by your drag node on drag end. To give proxyNode visibility, make sure to add CSS styles, such as border, which will apply to the proxy node on drag start.

YUI().use(
  'aui-sortable-layout',
  function(Y) {
    new Y.SortableLayout(
      {
        dragNodes: '.contentNode',
        dropNodes: '#mySortableLayout',
        proxyNode: Y.Node.create('<div class="proxyNode"></div>')
      }
    );
  }
);

You can set another HTML container to receive dropped Sortable Layout object by setting dropContainer to your HTML selector. Sortable Layout can now drag and drop content nodes onto one another and inside the separate DropContainer DIV:

<div id="dropContainer"></div>

YUI().use(
  'aui-sortable-layout',
  function(Y) {
    new Y.SortableLayout(
      {
        dragNodes: '.contentNode',
        dropContainer: '#dropContainer',
        dropNodes: '#mySortableLayout',
        proxyNode: Y.Node.create('<div class="proxyNode"></div>')
      }
    );
  }
);

You can even define a Placeholder HTML node which will appear in your drop zone before you drop your activeDrag node. Like we did for proxyNode, pass the placeholder property a Node.create constructor with your desired HTML placeholder. Just be sure to add CSS styles to the placeholder class so you can see your placeholder nodes!

YUI().use(
  'aui-sortable-layout',
  function(Y) {
    new Y.SortableLayout(
      {
        dragNodes: '.contentNode',
        dropContainer: '#dropContainer',
        dropNodes: '#mySortableLayout',
        placeholder: Y.Node.create('<div class="placeholder"></div>'),
        proxyNode: Y.Node.create('<div class="proxyNode"></div>')
      }
    );
  }
);