介绍

在我们日常开发中可能会面临很多交互上的问题，特别是在Web应用盛行的今天，在之前有段时间的文章中介绍过javascript的拖拽库sortablejs，Vue.Draggable就是基于Sortable.js的允许拖放和视图模型数组同步的组件，避免了我们常说的重复造轮子，有了它省了我们很多事情。它基于Sortable.js并提供Sortable.js的所有功能！

开源地址

Github：

https://github.com/SortableJS/Vue.Draggable

演示地址：

https://sortablejs.github.io/Vue.Draggable/#/two-lists

功能特性

1、完全支持Sortable.js功能：

• 支持触摸设备
• 支持拖动手柄和可选文本
• 智能自动滚动支持
• 不同列表之间的拖放
• 没有jQuery依赖

2、保持同步HTML和视图模型列表

3、与Vue.js 2.0 transition-group兼容

4、支持取消

5、在需要完全控制时报告任何更改的事件

6、重用现有的UI库组件（例如vuetify，element或vue材料等）并使用tag和componentData道具使它们可拖动

安装和使用

• npm or yarn

yarn add vuedraggable
npm i -S vuedraggable

• 浏览器

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

• 典型用法

<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,
 },
 ...

• transition-group

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

可拖动组件应直接包装可拖动元素，或包含可拖动元素的过渡组件。

• 带有页脚槽（）

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

• 标题槽

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

• Vuex

<draggable v-model='myList'>


computed: {
 myList: {
 get() {
 return this.$store.state.myList
 },
 set(value) {
 this.$store.commit('updateList', value)
 }
 }
}

具体如何使用参照官网说明

示例

• 简单用法

• 两个列表

• 复制

• 按Ctrl键从列表1克隆元素

• 使用手柄图标拖动

• 过渡

• 表格行

• 表格列

• 嵌套拖拽

以上仅仅是挑选了一些示例，更多示例可直接到演示地址体验！

总结

Vue.Draggable是基于Sortable的拖放组件，可以很好的满足我们的某些交互场景，比如单据打印模板拖放、拖拽表格配合浏览器缓存实现用户的习惯记忆功能等，这些都可以配合一起实现，更多有关Sortable也可以点击下面的链接简单了解！

https://www.toutiao.com/i6690205016852005389/