1.在项目中总会遇见一些需要排序的数据 ， 我们可以通过vue.draggable 进行拖动排序 。
2.Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。
3.拖顶的数据和data里的数据为双向绑定 ，在界面变的时候data中的数据也在跟着变化。
安装
npm i -S vuedraggable
使用
页面引入
import draggable from "vuedraggable"
定义组件
components: {
draggable
},
效果展示
low的效果图
页面使用
<draggable
class="syllable_ul"
element="ul"
:list="syllable"
:options="{group:'title', animation:150}"
:no-transition-on-drag="true"
@change="change"
@start="start"
@end="end"
:move="move"
>
<transition-group type="transition" :name="!drag? 'syll_li' : null" :css="true">
<li v-for="(item , idx) in syllable" :key="idx">{{item.title}}</li>
</transition-group>
</draggable>
事件
//evt里面有两个值，一个evt.added 和evt.removed 可以分别知道移动元素的ID和删除元素的ID
change(evt) {
console.log(evt , 'change...')
},
//start ,end ,add,update, sort, remove 得到的都差不多
start(evt) {
this.drag = true
console.log(evt , 'start...')
},
end(evt) {
console.log(evt , 'end....')
this.drag = true
evt.item //可以知道拖动的本身
evt.to // 可以知道拖动的目标列表
evt.from // 可以知道之前的列表
evt.oldIndex // 可以知道拖动前的位置
evt.newIndex // 可以知道拖动后的位置
},
move(evt, originalEvent) {
console.log(evt , 'move')
console.log(originalEvent) //鼠标位置
}
属性和方法说明
属性( Attributes)
draggable的属性：
| 参数 | 说明 | 可选值 | 默认值 |
|---|---|---|---|
| value | 用于实现拖拽的list，通常和内部v-for循环的数组为同一数组 | Array，非必须 | null |
| list | 就是value的替代品。从表现上没有看出不同 | Array，非必须 | null |
| element | <draggable>标签在渲染后展现出来的标签类型 ,可以用来兼容UI组件
|
String， | div |
| options | 配置项对象 下面有详细解释
|
Object |
