vue实现拖动图片进行排序Vue.Draggable

好久没接触vue的项目了，最近接到一个vue图片处理的小项目，有一项需求是要实现拖动图片就行排序。

接到这个需求之后立马想到了Vue.Draggable这款基于Sortable.js实现的vue拖拽插件，下面是实现过程 

第一步：安装Vue.Draggable。两种方式npm和yarn   （我用的npm）

npm i -S vuedraggable
yarn add vuedraggable

第二步：全局安装完成之后在main.js中全局引用也行在需要的页面也用也没问题 （我因为就一个页面需要我就单页面引入的）

<script>
import draggable from "vuedraggable"
export default {
  components: {
    draggable
  }
}
</script>

第三步：安装和引用都完成了，现在开始使用了。

<template>
  <div class="col">
    <draggable v-model="data" filter=".forbid" animation="300" :move="onMove">
      <transition-group>
        <div v-for="(item, index) in data" :key="index">
          <div class="img-hover">
            <img :src="'http://xxxxx' + item.img"/>
          </div>
        </div>
      </transition-group>
    </draggable>
  </div>
</template>

注意
/**
 *代码中的data为你的数据列表，onMove为你在拖动图片是触发的函数方法。
 *transition-group标签下一定是v-for循环，不然会报错。
**/

这样，一个简单的图片拖拽排序的简单demo就完成了。