| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | Nestable |
| A | 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 | ||
| 78 | **Inspect the [Nestable Demo](http://dbushell.github.com/Nestable/) for guidance.** | |
| 79 | ||
| 80 | ## Change Log | |
| 81 | ||
| 82 | ### 15th October 2012 | |
| 83 | ||
| 84 | * Merge for Zepto.js support | |
| 85 | * Merge fix for remove/detach items | |
| 86 | ||
| 87 | ### 27th June 2012 | |
| 88 | ||
| 89 | * Added `maxDepth` option (default to 5) | |
| 90 | * Added empty placeholder | |
| 91 | * Updated CSS class structure with options for `listClass` and `itemClass`. | |
| 92 | * Fixed to allow drag and drop between multiple Nestable instances (off by default). | |
| 93 | * Added `group` option to enabled the above. | |
| 94 | ||
| 95 | * * * | |
| 96 | ||
| 97 | Author: David Bushell [http://dbushell.com](http://dbushell.com/) [@dbushell](http://twitter.com/dbushell/) | |
| 98 | ||
| 99 | Copyright © 2012 David Bushell | BSD & MIT license | |
