Nestable 可拖拽树形结构

常用于拖拽排序、层级调整等功能

基础用法

▼显示代码

结果：

请拖动后看效果

不允许跨层级拖动

▼显示代码

结果：

请拖动后看效果

多个Nestable之间拖动

我是左侧的div

我是右侧的div

▼显示代码

左侧的结果：

请拖动后看效果

右侧的结果：

请拖动后看效果

查看状态，允许给item绑定点击事件，但不允许拖动，可编辑item的内容，通过点击item上的“拖动”按钮切换至可拖动状态（适合展示数据，并一键切换至拖动状态）

▼显示代码

结果：

请拖动后看效果

纯查看状态，不允许编辑和拖动，允许给item绑定点击事件（适合展示数据）

▼显示代码

参数列表：

参数			说明	类型	默认值
elObj			被渲染的元素DOM（必填）	可传入一个 DOM 对象或字符串； 若传入字符串，则会将其作为参数传入 document.querySelector以获取到对应 DOM 节点
options	group		用于区分CtpNestable分组的编号 说明：本参数主要针对页面中有多个CtpNestable时 如果多个CtpNestable的group值相同，则它们的内容可以互拖 如果不需多CtpNestable内容互拖，请配置不同的group值 （选填）
	crossLev		是否允许跨层级拖动（选填）	boolean	true
	maxDepth		允许拖动的最大层级（选填）	number	5
	view		是否处于查看状态，此状态下不可拖动，可通过"拖动"按钮一键切换至拖动态（选填）	boolean	false
	edit		是否可编辑，仅view为true时有效（选填）	boolean	false
	dragEndFun		拖动后的回调函数（选填） 纯查看状态下无效	function	function
	items (数组类型，由多个Object组成， 每个Object包含id、label等)	id	items的id（必填）	string/boolean/number
		label	items的标签/名称（必填）	string
		editOkFun	编辑完item后点击“确定”按钮后的回调事件（选填）	function
		deleteFun	点击了item上的“删除”按钮后的回调事件（选填）	function

方法列表

方法	说明	参数
serialize	返回序列化的json数据	-
collapseAll	折叠所有子级	-
expandAll	展开所有子级	-
destory	销毁元素	-