Pages UI
Search…
v5.0.1 - Pages HTML
UI Elements
Form Elements
Nestable
Nestables in Pages are powered by jQuery Nestables 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>1
<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/jquery-nestable/jquery.nestable.css">
Copied!
Step two
Include the relevant javascript files inside the
<body> before core template script inclusions1
<script type="text/javascript" src="assets/plugins/jquery-nestable/jquery.nestable.js"></script>
Copied!
Step three
Apply the plugin to your desired element
1
<!-- Element to be used with the plugin -->
2
<div class="dd" id="basic_example">
3
<ol class="dd-list">
4
<li class="dd-item" data-id="1">
5
<div class="dd-handle">
6
Item 1
7
</div>
8
</li>
9
<li class="dd-item" data-id="2">
10
<div class="dd-handle">
11
Item 2
12
</div>
13
<ol class="dd-list">
14
<li class="dd-item" data-id="3">
15
<div class="dd-handle">
16
Item 3
17
</div>
18
</li>
19
<li class="dd-item" data-id="4">
20
<div class="dd-handle">
21
Item 4
22
</div>
23
</li>
24
<li class="dd-item" data-id="5">
25
<div class="dd-handle">
26
Item 5
27
</div>
28
</li>
29
</ol>
30
</li>
31
</ol>
32
</div>
33
​
34
<script>
35
$(document).ready(function() {
36
// Apply the plugin to the element
37
$('#basic_example').nestable();
38
});
39
</script>
Copied!
Last modified 2yr ago
Copy link