Nestable is an interactive hierarchical list. You can drag and drop to rearrange the order. It works well on touch-screens.
-
Item 1
-
Item 1.1
-
Item 1.2
-
-
Item 2
-
Item 3
-
Item 3.1
-
Item 3.2
-
Serialised Output
<div class="dd" id="nestable">
<ol class="dd-list">
<li class="dd-item" data-id="1">
<div class="dd-handle">Item 1</div>
<ol class="dd-list">
<li class="dd-item" data-id="4">
<div class="dd-handle">Item 1.1</div>
</li>
<li class="dd-item" data-id="5">
<div class="dd-handle">Item 1.2</div>
</li>
</ol>
</li>
<li class="dd-item" data-id="2">
<div class="dd-handle">Item 2</div>
</li>
<li class="dd-item" data-id="3">
<div class="dd-handle">Item 3</div>
<ol class="dd-list">
<li class="dd-item" data-id="4">
<div class="dd-handle">Item 3.1</div>
</li>
<li class="dd-item" data-id="5">
<div class="dd-handle">Item 3.2</div>
</li>
</ol>
</li>
</ol>
</div>
Each list you can customize by standard css styles. Each element is responsive so you can add to it any other element to improve functionality of list.
-
Item 1
-
Item 1.1
-
Item 1.2
-
-
Item 2
-
Item 3
-
Item 3.1
-
Item 3.2
-
Serialised Output
<div class="dd" id="nestable2">
<ol class="dd-list">
<li class="dd-item" data-id="1">
<div class="dd-handle"><span class="label label-info"><i class="fa fa-cogs"></i></span> Item
1</div>
<ol class="dd-list">
<li class="dd-item" data-id="4">
<div class="dd-handle"><span class="label label-primary"><i
class="fa fa-bar-chart-o"></i></span> Item 1.1
</div>
</li>
<li class="dd-item" data-id="5">
<div class="dd-handle"><span class="label label-danger"><i
class="fa fa-laptop"></i></span> Item 1.2</div>
</li>
</ol>
</li>
<li class="dd-item" data-id="2">
<div class="dd-handle"><span class="label label-warning"><i
class="fa fa-expeditedssl"></i></span> Item 2</div>
</li>
<li class="dd-item" data-id="3">
<div class="dd-handle"><span class="label label-default"><i
class="fa fa-sitemap"></i></span> Item 3</div>
<ol class="dd-list">
<li class="dd-item" data-id="4">
<div class="dd-handle"><span class="label label-danger"><i
class="fa fa-list-ol"></i></span> Item 3.1</div>
</li>
<li class="dd-item" data-id="5">
<div class="dd-handle"><span class="label label-success"><i
class="fa fa-shopping-cart"></i></span> Item 3.2
</div>
</li>
</ol>
</li>
</ol>
</div>