vue awe-dnd 拖拽排序

拖拽排序

1.安装依赖

npm i awe-dnd -S

2.main.js引用

import VueDND from 'awe-dnd';
Vue.use(VueDND);

template部分

<div
  class="prantitem"
  v-for="(item, index) in prantList"
  :key="item.id"
  v-dragging="{ item: item, list: prantList, group: 'item' }"
  >
  <img :src="item.serviceIcon" alt="" />
  <span>{{ item.serviceName }}</span>
  <a-icon type="close" class="close" @click="delePrantIndex(item.id, index)" />
  <a-icon type="edit" class="edit" @click="editModel(item.id)" />
</div>

js部分：
mounted() {
  this.$dragging.$on('dragged', ({ value }) => {
    this.prantList = value.list //每次拖拽返回的新数组
    //这里记得把数组里的sort 值更改一下 然后重新返回给后台
  })
  this.$dragging.$on('dragend', () => {})
},

拖拽就是那么简单！