Fork me on GitHub

Nested List

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


Getting Started

First load the seed file, if you haven't yet.

<script src="https://cdn.alloyui.com/1.0.3/aui/aui-min.js"></script>

Then initialize AlloyUI and load the Nested List module.

AUI().use(
  'aui-nested-list',
  function(A) {
    // code goes here
  }
);

Using Nested 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 Nested List component, specify nodes for the Nested List to apply to, and add this dropCondition:

AUI().use(
  'aui-nested-list',
  function(A) {
    new A.NestedList(
      {
        dropCondition: function(event) {
          return true;
        },
        dropOn: 'myList',
        nodes: '#myList li',
      }
    );
  }
);

Configuring Nested List

There are quite a few more options you can pass to your Nested 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):

AUI().use(
  'aui-nested-list',
  function(A) {
    var placeholder = A.Node.create('<li class="placeholder"></li>');

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

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

AUI().use(
  'aui-nested-list',
  function(A) {
    new A.NestedList(
      {
        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!

For more information about configuration, check out our API Docs.