Pages Documentation

Nestable

jQuery users

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>

AngularJS users

Nestables for AngularJS is made possible by Angular Nestable directive.

Step One

Include the nestable ocLazyLoad module in your dependency list of router config. Please refer to AngularJS guide for more

Step two

Add ng-nestable to your module's list of dependencies.

Add list data to scope

 $scope.items = [{
     item: "Item 1", // this object will be referenced as the $item on scope
     children: []
 }, {
     item: "Item 2",
     children: [{
         item: "Item 3",
         children: []
     }, {
         item: "Item 4",
         children: []
     }]
 }, {
     item: "Item 5",
     children: []
 }];

Step three

Add following markup to your page

<div ng-nestable ng-model="items">
    <div>
        <!-- this element is the template for each menu item -->
        <!-- the $item is available on scope and is the reference to the menu item object -->
        {{$item}}
    </div>
</div>

Other useful resources