jquery.nestable 树型结构

参数选项说明

group(选填)
描述：用来指定允许交互拖放插入的群组
预设值： 0

maxDepth(选填)
描述：最多允许有几个阶层
预设值： 5

threshold(选填)
描述：
预设值： 20

listNodeName(选填)
描述：要用来产生拖拉的元素
预设值： ‘o1’

itemNodeName(选填)
描述：要用来产生拖拉的元素项目
预设值： ‘li’

rootClass(选填)
描述：拖拉样式的前缀
预设值： ‘dd’

listClass(选填)
描述：要用来产生拖拉的元素所套用的样式
预设值： ‘dd-list’

itemClass(选填)
描述：要用来产生拖拉的元素项目所套用的样式
预设值： ‘dd-item’

dragClass(选填)
描述：当元素被拖拉时所套用的样式
预设值： ‘dd-dragel’

handleClass(选填)
描述：用来拖拉的控件所套用的样式
预设值： ‘dd-handle’

collapsedClass(选填)
描述：当元素项目有子元素可以展开时所套用的样式
预设值： ‘dd-collapsed’

placeClass(选填)
描述：用来暂位用的元素所套用的样式
预设值： ‘dd-placeholder’

emptyClass(选填)
描述：当元素中没有任何可拖拉的元素项目时所套用的样式
预设值： ‘dd-empty’

expandBtnHTML(选填)
描述：用来产生可以用来点击展开用的按钮
預設值： ‘Expand’

collapseBtnHTML(选填)
描述：用来产生可以用来点击收合用的按钮
预设值： ‘Collapse’

方法说明

// 将指定内存块中的元素转换成可拖拉效果
$(selector).nestable(params);

// 取得指定内存块中的元素拖拉后的结构
$(selector).nestable(‘serialize’);

// 展开指定内存块中的元素
$(selector).nestable(‘expandAll’);

// 收合指定内存块中的元素
$(selector).nestable(‘collapseAll’);

事件说明

// 当指定内存块中的元素的位置被改变时
$(selector).on(‘change’, fn);

HTML 结构

<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>