Nestable
Drag & drop hierarchical list with mouse and touch compatibility (jQuery plugin). Demo page.
<!-- Style --><link rel="stylesheet" href="vendors/nestable/nestable.css" type="text/css"><!-- Javascript --><script src="vendors/nestable/jquery.nestable.js"></script>
<div class="dd"> <ol class="dd-list"> <li class="dd-item" data-id="1"> <div class="dd-handle">Item 1</div> </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 4</div> </li> <li class="dd-item" data-id="5"> <div class="dd-handle">Item 5</div> </li> </ol> </li> </ol></div>
$('.dd').nestable({ /* config options */ });
Draggable Handles
-
Item 1
-
Item 2
-
Item 3
-
Item 4
-
Item 5
-
Item 6
-
Draggable Handles
-
Item 13
-
Item 14
-
Item 15
-
Item 16
-
Item 17
-
Item 18
-