You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

107 lines
3.8 KiB

1 year ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. Nestable
  2. ========
  3. ## PLEASE NOTE
  4. **I cannot provide any support or guidance beyond this README. If this code helps you that's great but I have no plans to develop Nestable beyond this demo (it's not a final product and has limited functionality). I cannot reply to any requests for help.**
  5. * * *
  6. ### Drag & drop hierarchical list with mouse and touch compatibility (jQuery / Zepto plugin)
  7. [**Try Nestable Demo**](http://dbushell.github.com/Nestable/)
  8. Nestable is an experimental example and not under active development. If it suits your requirements feel free to expand upon it!
  9. ## Usage
  10. Write your nested HTML lists like so:
  11. <div class="dd">
  12. <ol class="dd-list">
  13. <li class="dd-item" data-id="1">
  14. <div class="dd-handle">Item 1</div>
  15. </li>
  16. <li class="dd-item" data-id="2">
  17. <div class="dd-handle">Item 2</div>
  18. </li>
  19. <li class="dd-item" data-id="3">
  20. <div class="dd-handle">Item 3</div>
  21. <ol class="dd-list">
  22. <li class="dd-item" data-id="4">
  23. <div class="dd-handle">Item 4</div>
  24. </li>
  25. <li class="dd-item" data-id="5">
  26. <div class="dd-handle">Item 5</div>
  27. </li>
  28. </ol>
  29. </li>
  30. </ol>
  31. </div>
  32. Then activate with jQuery like so:
  33. $('.dd').nestable({ /* config options */ });
  34. ### Events
  35. The `change` event is fired when items are reordered.
  36. $('.dd').on('change', function() {
  37. /* on change event */
  38. });
  39. ### Methods
  40. You can get a serialised object with all `data-*` attributes for each item.
  41. $('.dd').nestable('serialize');
  42. The serialised JSON for the example above would be:
  43. [{"id":1},{"id":2},{"id":3,"children":[{"id":4},{"id":5}]}]
  44. ### Configuration
  45. You can change the follow options:
  46. * `maxDepth` number of levels an item can be nested (default `5`)
  47. * `group` group ID to allow dragging between lists (default `0`)
  48. These advanced config options are also available:
  49. * `listNodeName` The HTML element to create for lists (default `'ol'`)
  50. * `itemNodeName` The HTML element to create for list items (default `'li'`)
  51. * `rootClass` The class of the root element `.nestable()` was used on (default `'dd'`)
  52. * `listClass` The class of all list elements (default `'dd-list'`)
  53. * `itemClass` The class of all list item elements (default `'dd-item'`)
  54. * `dragClass` The class applied to the list element that is being dragged (default `'dd-dragel'`)
  55. * `handleClass` The class of the content element inside each list item (default `'dd-handle'`)
  56. * `collapsedClass` The class applied to lists that have been collapsed (default `'dd-collapsed'`)
  57. * `placeClass` The class of the placeholder element (default `'dd-placeholder'`)
  58. * `emptyClass` The class used for empty list placeholder elements (default `'dd-empty'`)
  59. * `expandBtnHTML` The HTML text used to generate a list item expand button (default `'<button data-action="expand">Expand></button>'`)
  60. * `collapseBtnHTML` The HTML text used to generate a list item collapse button (default `'<button data-action="collapse">Collapse</button>'`)
  61. **Inspect the [Nestable Demo](http://dbushell.github.com/Nestable/) for guidance.**
  62. ## Change Log
  63. ### 15th October 2012
  64. * Merge for Zepto.js support
  65. * Merge fix for remove/detach items
  66. ### 27th June 2012
  67. * Added `maxDepth` option (default to 5)
  68. * Added empty placeholder
  69. * Updated CSS class structure with options for `listClass` and `itemClass`.
  70. * Fixed to allow drag and drop between multiple Nestable instances (off by default).
  71. * Added `group` option to enabled the above.
  72. * * *
  73. Author: David Bushell [http://dbushell.com](http://dbushell.com/) [@dbushell](http://twitter.com/dbushell/)
  74. Copyright © 2012 David Bushell | BSD & MIT license