拖拽排序
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', () => {})
},
拖拽就是那么简单!