# 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