简介

先讲Sortable.js, Sortable.js用于在现代浏览器和触摸设备上重新排序拖放列表。支持Meteor，AngularJS，React，Polymer，Vue，Ember，Knockout和任何CSS库，例如Bootstrap, github star 17K+， 可以说非常流行和受到广大前端同学的欢迎，今天的主角就是基于Sortable.js的Vue组件。直接上特效:

Vue.Draggable 目前github star 8.3K+, 最新版本2.23.0

功能列表

Vue组件（Vue.js 2.0）或指令（Vue.js 1.0）允许拖放和视图模型数组同步。

基于并提供Sortable.js的所有功能

• 完全支持Sortable.js功能：
• 支持触摸设备
• 支持拖动手柄和可选文本
• 智能自动滚动
• 支持不同列表之间的拖放
• 没有jQuery的依赖
• 保持同步HTML和视图模型列表
• 与Vue.js 2.0过渡组兼容
• 在需要完全控制时报告任何更改的事件
• 重用现有的UI库组件（例如vuetify，element或vue材料等...）并使用tag和componentData道具使它们可拖动

快速开发

• 安装

yarn add vuedraggable
npm i -S vuedraggable

请注意，对于Vue 2.0而言，它是vuedraggable，而不是版本1.0的vue-draggable

• CDN

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>

For Vue.js 2.0

典型用法:

<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>

.vue 文件:

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

With transition-group:

<draggable v-model="myArray">
 <transition-group>
 <div v-for="element in myArray" :key="element.id">
 {{element.name}}
 </div>
 </transition-group>
</draggable>

可拖动组件应直接包装可拖动元素，或transition-component包含可拖动元素。

With footer slot:

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

With header slot:

<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>

With Vuex:

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

PS

就简单介绍到这里，关于更多用法，请参见官网技术文档。