Sortable List

• Introduction
• Basic Example

Gives the user the ability to interact with a list element.

---

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 List module.

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

---

Using Sortable List

Create an HTML list (ordered or unordered):

<ol id="myList">
  <li>Preheat oven to 350&deg;</li>
  <li>Mix ingredients
    <ol>
      <li>Blend butter, sugar, eggs, and vanilla</li>
      <li>Add flour and baking powder</li>
    </ol>
  </li>
  <li>Shape into 2&quot; spheres and place on cookie sheet</li>
  <li>Bake
    <ol>
      <li>Check every few minutes</li>
      <li>Should take around 10-12 minutes</li>
      <li>Remove when golden brown</li>
    </ol>
  </li>
</ol>

Now create an instance of the Sortable List component, specify nodes for the Sortable List to apply to, and add this dropCondition:

YUI().use(
  'aui-sortable-list',
  function(Y) {
    new Y.SortableList(
      {
        dropCondition: function(event) {
          return true;
        },
        dropOn: 'myList',
        nodes: '#myList li'
      }
    );
  }
);

---

Configuring Sortable List

There are quite a few more options you can pass to your Sortable List instance to customize it as you'd like.

For example, you can set a placeholder that will indicate as you drag your element where it will be dropped (you can style this element using CSS):

YUI().use(
  'aui-sortable-list',
  function(Y) {
    var placeholder = Y.Node.create('<li class="placeholder"></li>');

    new Y.SortableList(
      {
        dropCondition: function(event) {
          return true;
        },
        nodes: '#myList li',
        placeholder: placeholder
      }
    );
  }
);

You can also specify a certain type of list that the Sortable List instance will limit itself to:

YUI().use(
  'aui-sortable-list',
  function(Y) {
    new Y.SortableList(
      {
        dropCondition: function(event) {
          return true;
        },
        dropOn: 'myList',
        nodes: '#myList li'
      }
    );
  }
);

From there, you can further specify the drop container, add drop conditions, add a helper div in addition to the placeholder, and more!