vue实现拖拽效果

特性
支持触摸设备
支持拖拽和选择文本
支持智能滚动
支持不同列表之间的拖拽
和视图模型同步刷新
和vue2的国度动画兼容
支持撤销操作
当需要完全控制时，可以抛出所有变化
可以和现有的UI组件兼容

安装

npm i -S vuedraggable

在需要使用的vue页面，导入并注册到局部组件

  import draggable from 'vuedraggable'
  ...
  export default {
        components: {
            draggable,
        },
  ...

使用

<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
   <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>

在 如果数据是在Vuex里面

<draggable v-model='myList'>
computed: {
    myList: {
        get() {
            return this.$store.state.myList
        },
        set(value) {
            this.$store.commit('updateList', value)
        }
    }
}

如果想当插槽使用

<draggable v-model="myArray" draggable=".item">
    <div v-for="element in myArray" :key="element.id" class="item">
        {{element.name}}
    </div>
    <button slot="header" @click="addPeople">Add</button>
</draggable>