对指定的数组拖拽排序,可配置手柄/可排序项/回调表达式
待排序数组
通常是表单里的一个数组字段
目标容器选择器
先把待排序数组通过数组数据源展示成列表或栅格,作为目标容器,通常使用挂载组件作为容器,这样可以控制列表的重新挂载。默认是此插件的前一个兄弟节点(previousElementSibling),所以通常直接把插件置于此容器后面。
手柄选择器
可以给排序项配置一个拖拽手柄,这样只有拽动此手柄才能排序。
被拽元素类名
用于自定义被拽元素的样式,也可通过更改zp116_dragClass
的样式来实现
目标投放位置类名
用于自定义目标投放位置的样式,也可通过更改zp116_dropClass
的样式来实现
拖拽结束表达式
排序完成后执行的回调表达式。表达式里可以使用$ev事件对象,它里面包含newIndex
和oldIndex
,表示被拖动的元素在数组中的新旧位置;当待排序列表包含不可排序项是推荐使用newDraggableIndex
和oldDraggableIndex
,表示被拖动的元素在可拖动数组中的新旧位置,排除了不可排序项。
重新挂载
当给一个表单数组排序时,可能的一个现象是把一个数据项拖到一个地方放好了一松手又弹回去了,这是因为此排序插件和数组数据源同时操作同一个数组造成的,重新挂载一下就可以了:例如在拖拽结束表达式里写$v.刷新 = ($v.刷新 || 0) + 1
,然后用挂载组件把排序插件和表单数组包起来,在挂载组件里的重新挂载表达式里写($v.刷新)
。