Nestable 可移动拖拽的树型结构的使用(jQuery)

  • p5_190635
    了解作者
  • 8.9KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-01 12:26
    上传日期
NULL 博文链接:https://justcoding.iteye.com/blog/2107210
Nestable-master.zip
  • Nestable-master
  • index.html
    12.5KB
  • jquery.nestable.js
    17.5KB
  • README.md
    3.8KB
内容介绍
Nestable ======== ## PLEASE NOTE **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.** * * * ### Drag & drop hierarchical list with mouse and touch compatibility (jQuery / Zepto plugin) [**Try Nestable Demo**](http://dbushell.github.com/Nestable/) Nestable is an experimental example and not under active development. If it suits your requirements feel free to expand upon it! ## Usage Write your nested HTML lists like so: <div class="dd"> <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> </li> <li class="dd-item" data-id="3"> <div class="dd-handle">Item 3</div> <ol class="dd-list"> <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> Then activate with jQuery like so: $('.dd').nestable({ /* config options */ }); ### Events The `change` event is fired when items are reordered. $('.dd').on('change', function() { /* on change event */ }); ### Methods You can get a serialised object with all `data-*` attributes for each item. $('.dd').nestable('serialize'); The serialised JSON for the example above would be: [{"id":1},{"id":2},{"id":3,"children":[{"id":4},{"id":5}]}] ### Configuration You can change the follow options: * `maxDepth` number of levels an item can be nested (default `5`) * `group` group ID to allow dragging between lists (default `0`) These advanced config options are also available: * `listNodeName` The HTML element to create for lists (default `'ol'`) * `itemNodeName` The HTML element to create for list items (default `'li'`) * `rootClass` The class of the root element `.nestable()` was used on (default `'dd'`) * `listClass` The class of all list elements (default `'dd-list'`) * `itemClass` The class of all list item elements (default `'dd-item'`) * `dragClass` The class applied to the list element that is being dragged (default `'dd-dragel'`) * `handleClass` The class of the content element inside each list item (default `'dd-handle'`) * `collapsedClass` The class applied to lists that have been collapsed (default `'dd-collapsed'`) * `placeClass` The class of the placeholder element (default `'dd-placeholder'`) * `emptyClass` The class used for empty list placeholder elements (default `'dd-empty'`) * `expandBtnHTML` The HTML text used to generate a list item expand button (default `'<button data-action="expand">Expand></button>'`) * `collapseBtnHTML` The HTML text used to generate a list item collapse button (default `'<button data-action="collapse">Collapse</button>'`) **Inspect the [Nestable Demo](http://dbushell.github.com/Nestable/) for guidance.** ## Change Log ### 15th October 2012 * Merge for Zepto.js support * Merge fix for remove/detach items ### 27th June 2012 * Added `maxDepth` option (default to 5) * Added empty placeholder * Updated CSS class structure with options for `listClass` and `itemClass`. * Fixed to allow drag and drop between multiple Nestable instances (off by default). * Added `group` option to enabled the above. * * * Author: David Bushell [http://dbushell.com](http://dbushell.com/) [@dbushell](http://twitter.com/dbushell/) Copyright © 2012 David Bushell | BSD & MIT license
评论
    相关推荐
    • jQuery
      NULL 博文链接:https://vikingwei.iteye.com/blog/2268656
    • jquery
      NULL 博文链接:https://daxiaoli123.iteye.com/blog/2018262
    • jquery
      NULL 博文链接:https://ericfang.iteye.com/blog/370509
    • jquery
      NULL 博文链接:https://lflei.iteye.com/blog/1837925
    • jquery
      NULL 博文链接:https://jose-bing.iteye.com/blog/1182099
    • Jquery
      NULL 博文链接:https://sjtu-wangjie.iteye.com/blog/1927863
    • jquery
      NULL 博文链接:https://nightbin0420.iteye.com/blog/853441
    • jquery
      NULL 博文链接:https://mr-lili-1986-163-com.iteye.com/blog/1124469
    • jquery
      NULL 博文链接:https://jose-bing.iteye.com/blog/1182099
    • jquery
      jquery api 博文链接:https://imticg.iteye.com/blog/228687