| 5 |
lars |
1 |
Nestable
|
|
|
2 |
========
|
|
|
3 |
|
|
|
4 |
### Drag & drop hierarchical list with mouse and touch compatibility (jQuery / Zepto plugin)
|
|
|
5 |
|
|
|
6 |
[**Try Nestable Demo**](http://dbushell.github.com/Nestable/)
|
|
|
7 |
|
|
|
8 |
## Usage
|
|
|
9 |
|
|
|
10 |
Write your nested HTML lists like so:
|
|
|
11 |
|
|
|
12 |
<div class="dd">
|
|
|
13 |
<ol class="dd-list">
|
|
|
14 |
<li class="dd-item" data-id="1">
|
|
|
15 |
<div class="dd-handle">Item 1</div>
|
|
|
16 |
</li>
|
|
|
17 |
<li class="dd-item" data-id="2">
|
|
|
18 |
<div class="dd-handle">Item 2</div>
|
|
|
19 |
</li>
|
|
|
20 |
<li class="dd-item" data-id="3">
|
|
|
21 |
<div class="dd-handle">Item 3</div>
|
|
|
22 |
<ol class="dd-list">
|
|
|
23 |
<li class="dd-item" data-id="4">
|
|
|
24 |
<div class="dd-handle">Item 4</div>
|
|
|
25 |
</li>
|
|
|
26 |
<li class="dd-item" data-id="5">
|
|
|
27 |
<div class="dd-handle">Item 5</div>
|
|
|
28 |
</li>
|
|
|
29 |
</ol>
|
|
|
30 |
</li>
|
|
|
31 |
</ol>
|
|
|
32 |
</div>
|
|
|
33 |
|
|
|
34 |
Then activate with jQuery like so:
|
|
|
35 |
|
|
|
36 |
$('.dd').nestable({ /* config options */ });
|
|
|
37 |
|
|
|
38 |
### Events
|
|
|
39 |
|
|
|
40 |
The `change` event is fired when items are reordered.
|
|
|
41 |
|
|
|
42 |
$('.dd').on('change', function() {
|
|
|
43 |
/* on change event */
|
|
|
44 |
});
|
|
|
45 |
|
|
|
46 |
### Methods
|
|
|
47 |
|
|
|
48 |
You can get a serialised object with all `data-*` attributes for each item.
|
|
|
49 |
|
|
|
50 |
$('.dd').nestable('serialize');
|
|
|
51 |
|
|
|
52 |
The serialised JSON for the example above would be:
|
|
|
53 |
|
|
|
54 |
[{"id":1},{"id":2},{"id":3,"children":[{"id":4},{"id":5}]}]
|
|
|
55 |
|
|
|
56 |
### Configuration
|
|
|
57 |
|
|
|
58 |
You can change the follow options:
|
|
|
59 |
|
|
|
60 |
* `maxDepth` number of levels an item can be nested (default `5`)
|
|
|
61 |
* `group` group ID to allow dragging between lists (default `0`)
|
|
|
62 |
|
|
|
63 |
These advanced config options are also available:
|
|
|
64 |
|
|
|
65 |
* `listNodeName` The HTML element to create for lists (default `'ol'`)
|
|
|
66 |
* `itemNodeName` The HTML element to create for list items (default `'li'`)
|
|
|
67 |
* `rootClass` The class of the root element `.nestable()` was used on (default `'dd'`)
|
|
|
68 |
* `listClass` The class of all list elements (default `'dd-list'`)
|
|
|
69 |
* `itemClass` The class of all list item elements (default `'dd-item'`)
|
|
|
70 |
* `dragClass` The class applied to the list element that is being dragged (default `'dd-dragel'`)
|
|
|
71 |
* `handleClass` The class of the content element inside each list item (default `'dd-handle'`)
|
|
|
72 |
* `collapsedClass` The class applied to lists that have been collapsed (default `'dd-collapsed'`)
|
|
|
73 |
* `placeClass` The class of the placeholder element (default `'dd-placeholder'`)
|
|
|
74 |
* `emptyClass` The class used for empty list placeholder elements (default `'dd-empty'`)
|
|
|
75 |
* `expandBtnHTML` The HTML text used to generate a list item expand button (default `'<button data-action="expand">Expand></button>'`)
|
|
|
76 |
* `collapseBtnHTML` The HTML text used to generate a list item collapse button (default `'<button data-action="collapse">Collapse</button>'`)
|
|
|
77 |
* `dropCallback` The callback method which is called when an item has been successfully moved. It has 1 argument: object with all details (default `null`)
|
|
|
78 |
|
|
|
79 |
`dropCallback` details object:
|
|
|
80 |
|
|
|
81 |
* `sourceId` - id of moved element
|
|
|
82 |
* `destId` - id of destination parent or null if element was moved directly as root
|
|
|
83 |
* `sourceEl` - whole moved element if you want to gather additional info about it
|
|
|
84 |
* `destParent` - whole destination parent element (if root, then it returns direct container)
|
|
|
85 |
* `destRoot` - contains destination group where element was dropped
|
|
|
86 |
* `sourceRoot` - contains source group where element belonged to before user started dragging it
|
|
|
87 |
|
|
|
88 |
**Inspect the [Nestable Demo](http://dbushell.github.com/Nestable/) for guidance.**
|
|
|
89 |
|
|
|
90 |
## Change Log
|
|
|
91 |
|
|
|
92 |
### 15th October 2012
|
|
|
93 |
|
|
|
94 |
* Merge for Zepto.js support
|
|
|
95 |
* Merge fix for remove/detach items
|
|
|
96 |
|
|
|
97 |
### 27th June 2012
|
|
|
98 |
|
|
|
99 |
* Added `maxDepth` option (default to 5)
|
|
|
100 |
* Added empty placeholder
|
|
|
101 |
* Updated CSS class structure with options for `listClass` and `itemClass`.
|
|
|
102 |
* Fixed to allow drag and drop between multiple Nestable instances (off by default).
|
|
|
103 |
* Added `group` option to enabled the above.
|
|
|
104 |
|
|
|
105 |
* * *
|
|
|
106 |
|
|
|
107 |
Author: David Bushell [http://dbushell.com](http://dbushell.com/) [@dbushell](http://twitter.com/dbushell/)
|
|
|
108 |
|
|
|
109 |
Copyright © 2012 David Bushell | BSD & MIT license
|