Using [data-nestable-*] Attributes

Nestable can utilise HTML5 [data-nestable-*] attributes for further customisation.

The attributes must be added to the list item elements.

<ol>
    <li>Item 1</li>
    <li data-nestable-axis="x">Item 2</li>
    <li data-nestable-axis="y">Item 3</li>
    <li>Item 4</li>
    <li id="parent1">Item 5
        <ol>
            <li data-nestable-parent="parent1">Item 6</li>
            <li data-nestable-parent="parent1">Item 7
                <ol>
                    <li>Item 8</li>
                    <li>Item 9</li>
                </ol>					
            </li>
        </ol>
    </li>
    <li data-nestable-disabled="nesting">Item 10</li>
    <li>Item 11</li>
    <li data-nestable-disabled="dragging">Item 12</li>
    <li>Item 13</li>
    <li data-nestable-disabled="disabled">
        Item 14
        <ol>
            <li>Item 15</li>
        </ol>					
    </li>
</ol>

Attribute reference

Attribute Name Value Description
[data-nestable-axis] "x" or "y" Confines the list item to either the x (left / right) or y (up / down) axis when moving. Setting to "x" will allow nesting, but prevent reordering. Setting to "y" will allow reordering, but prevent nesting.
[data-nestable-disabled] "disabled", "dragging" or "nesting" Set to "dragging" to prevent dragging of the item, but still allow items to be nested within it. Set to "nesting" to prevent nesting items within it, but still allow dragging. Setting to "disabled" completely disables the item, i.e. it cannot be dragged / reordered / nested and cannot have items nested / dropped in it.
[data-nestable-parent] CSS3 ID selector string Confines any list item to the parent defined in the value. The value must be the id string of the parent element WITHOUT the #.
Events Demo

  1. Item 1
  2. Item 2 data-nestable-axis="x"
  3. Item 3 data-nestable-axis="y"
  4. Item 4
  5. Item 5 #parent1
    1. Item 6 data-nestable-parent="parent1"
    2. Item 7 data-nestable-parent="parent1"
      1. Item 8
      2. Item 9
  6. Item 10 data-nestable-disabled="nesting"
  7. Item 11
  8. Item 12 data-nestable-disabled="dragging"
  9. Item 13
  10. Item 14 data-nestable-disabled="disabled"
    1. Item 15

Previous Next