vue中如何简单使用vue.draggable组件实现拖拽功能

Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件

以上是Vue.Draggable的官网介绍。
Vue.Draggable使用起来是非常方便的，下面我来介绍一下它在vue中基本的用法。

1：下载安装

npm i -S vuedraggable

2：在你需要的页面中导入它

// 将它导入你的页面中
import vuedraggable from 'vuedraggable'
// 它是个组件，所以你需要把它注册为局部组件。（当然，你也可以将它注册为全局组建供你随时使用）
components: {
	vuedraggable
}

3：让我们来使用它

1：这是 vueDraggable 固定的基本结构

<vuedraggable>
    <transition-group>
    	<!-- 这里面放你需要拖拽的元素 -->
    </transition-group>
</vuedraggable>

2：当然，为了实现它的功能我们需要给它加上属性和数据。

HTML：

v-model ：拖拽组件必须的属性，绑定的是要拖拽移动的数组。

<vuedraggable v-model="arr"  class="draggable">
    <transition-group>
    	<div class="item" v-for="(item, i) in arr" :key="i">{{item}}</div>
    </transition-group>
</vuedraggable>

CSS:

.draggable {
    width: 500px;
    margin: auto;
}
.item {
    height: 40px;
    line-height: 40px;
    margin-bottom: 20px;
    background-color: skyblue;
    text-align: center;
    color: #fff;
    cursor: move;
}

JS：

data () {
        return {
            arr: [1, 2, 3, 4, 5, 6, 7]
        }
    }

效果图如下：

当然了，此时你只能进行简单的数据拖拽而已，如果想要更加炫酷的效果我们需要加上其他的属性了。

3：更多的属性，更炫酷的效果。

我们可以加上 chosen-class 和 animation 来让动画过渡更加的丝滑。

chosen-class： 定义被选中拖拽时元素的样式，需要在样式后面加上 !important，并且需要开启force-fallback="true"这个属性。

animation：拖动时的动画效果时间，单位毫秒

HTML:

<!-- 在刚才的基础上我们增加了 chosen-class、force-fallback、animation属性。-->
<vuedraggable v-model="arr"
              chosen-class="chose"
              force-fallback="true"
              animation="1000"
              class="draggable">
	<transition-group>
		<div class="item"
             v-for="(item, i) in arr"
             :key="i">{{item}}
		</div>
	</transition-group>
</vuedraggable>

CSS:

.chose {
    background-color: pink;
    border: 1px solid #000 !important;
    cursor: move !important;
}

效果如下：

请忽略这个水印。。。。