Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件。本篇将介绍如何搭建环境及简单的例子，使用起来特别简单对被拖拽元素也没有CSS样式的特殊要求。
文档地址:
vuedraggable
NPM或yarn安装方式
yarn add vuedraggable
npm i -S vuedraggable
ghostClass
:ghostClass="ghostClass" 设置拖动元素的占位符类名,你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
chosenClass
:ghostClass="hostClass" 被选中目标的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
dragClass
:dragClass="dragClass"拖动元素的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
dataIdAttr
dataIdAttr: 'data-id'
forceFallback
默认false，忽略HTML5的拖拽行为，因为h5里有个属性也是可以拖动，你要自定义ghostClass chosenClass dragClass样式时，建议forceFallback设置为true
fallbackClass
默认false，克隆的DOM元素的类名
allbackOnBody
默认false，克隆的元素添加到文档的body中
fallbackTolerance
拖拽之前应该移动的px
scroll
默认true,有滚动区域是否允许拖拽
scrollFn
滚动回调函数
scrollSensitivity
距离滚动区域多远时，滚动滚动条
scrollSpeed
<br><el-link href="https://www.itxst.com/vue-draggable/tutorial.html" target="target">文档</el-link>
<br>
{{ list }}
<vuedraggable v-model="list" class="content">
<template v-
for
="item,key in list">
<el-tag :key="key" class="item">{{ item }}</el-tag>
</template>
</vuedraggable>
</template>
<script>
import vuedraggable from
'vuedraggable'
export
default
{
components: { vuedraggable },
data() {
return
{
list: [
1, 2, 3, 4, 5, 6, 7, 8, 9, 10
]
</script>
<style>
.item
margin:
0
10px
.content
background: gray;
</style>
