Nestable
Last updated 9 months ago
Nestables in Pages are powered by jQuery Dynatree, which is a Drag & drop hierarchical list with mouse and touch compatibility Follow these steps to initialize nestables in your page
Step one
Include the stylesheet jquery.nestable.css inside the <head>
<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/jquery-nestable/jquery.nestable.css">
Step two
Include the relevant javascript files inside the <body> before core template script inclusions
<script type="text/javascript" src="assets/plugins/jquery-nestable/jquery.nestable.js"></script>
Step three
Apply the plugin to your desired element
<!-- Element to be used with the plugin --><div class="dd" id="basic_example"><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><ol class="dd-list"><li class="dd-item" data-id="3"><div class="dd-handle">Item 3</div></li><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>​<script>$(document).ready(function() {// Apply the plugin to the element$('#basic_example').nestable();});</script>