vue中实现拖拽排序

1.刚做的需求，需要在商品编辑的时候对商品图片以及商品详情图进行一个拖拽排序的功能

2.在vue中 首先安装依赖

　　1.npm install awe-dnd --save

　　2.我们公司用的是yarn管理的所以有点不一样

　　　　yarn add awe-dnd

　　　　yarn install

3.这样依赖就安装好了，在使用的时候也很简单

　　在main.js 中引入 并暴露出来 

　　import VueDND from 'awe-dnd'

　　Vue.use(VueDND)

4.然后我们在项目中就可以去使用了

　　这里以我做的项目为例

<template>

　　<div v-for="(item, index) in info.image" v-dragging="{ list: info.image, item: item, group: 'image' }" :key="index">

　　　　<img :src=" + item + '" alt="">

　　</div>

　　<div v-for="(item, index) in info. img_details" v-dragging="{ list: info. img_details, item: item, group: ' imgDetails' }" :key="index">

　　　　<img :src=" + item + '" alt="">

　　</div>

</template>

 

<script>

　　data() {

　　　return {　

　　　　info: {

　　　　　　img_details: [],

　　　　　　image: []

　　　　},

　　　}

　　},

　　mounted() {

　　　　this.$dragging.$on('dragged', (value) => {

　　　　//因为我这在排序的时候不需要做处理，所以空着就行

　　　　})

　　}

</script>

这里给大家说明下：image，和img_details 是获取的数据所以这里没有写，

说一下踩过的小坑，我这个页面有两个地方用到拖拽所以当时没有去用group属性所以不论怎么该只有一个生效，

看了官网才知道这个属性是 “group可拖动列表的唯一键“ 这是翻译过来的，所以我们可以通过定义不同的值来实现多个拖拽功能

如果大家需要看案例效果可以参照：https://www.npmjs.com/package/awe-dnd

 

 

 

 

转载于:https://www.cnblogs.com/zengkai/p/9641769.html