起步
东西确实是好东西，奈何一开始文档没捋清，费了一番时间好好琢磨了一下。
Github：https://github.com/SortableJS/vue.draggable.next，完整代码如下：
代码语言：javascript复制<draggable
v-model="myArray"
group="people"
@start="drag=true"
@end="drag=false"
:move="move"
handle=".handle"
tag="ul"
item-key="id">
<template #header>
<li class="add">
<van-icon name="plus" size="18"/> 添加标签
</li>
</template>
<template #item="{element}">
<li>
<div>{{element.name}}</div>
<div class="icon">
<van-icon :name="ban"/>
<van-icon class="handle" style="margin-left: 20px;" :name="exchange"/>
</div>
</li>
</template>
<template #footer>
<li class="add">
<van-icon name="plus" size="18"/> 添加标签
</li>
</template>
</draggable>1.配置说明
- v-modal，绑定数据源。
- item-key，指定作为key的键名。
- tag，指定外部标签名。
- handle，指定#item内，触发拖动的选择器。
- move，移动过程中触发的函数。
- ghostClass，拖动时下方元素添加的类。
- dragClass，拖动元素添加的类
- selectedClass，选中元素的类。
- #item，内容区域的插槽，参数{element，index}
- #header，#footer，顶部和底部不触发拖动的区域元素
- 各种方法
完整参数说明：https://github.com/SortableJS/Sortable#options
2.使用记录
使用forceFallback: true 将强制拖动时不使用h5 的dragable接口。
当使用forceFallback时，指定拖动元素fallbackClass的样式类。
fallbackOnBody: false, 用于指定是否将append的元素添加到body下面，不指定时，将复制到被拖动元素的同一层级
