vue2 中如何使用 vuedraggable 库实现拖拽功能

1.通过 npm 或 yarn 安装 vuedraggable 库

npm install vuedraggableyarn add vuedraggable

2. 引入组件内部使用，以下代码是一个Demo，可直接复制粘贴演示

注意：因项目使用了 vant，需要安装 vant 才能正常运行

<template><div class="wrapper"><van-nav-bar title="生产订单" left-arrow @click-left="onLeftClick" /><div class="page_bg"><div style="display: flex; justify-content: center"><van-list class="list_wrap myStyle" :loading="loading" :finished="finished" @load="onLoad"><van-cell class="cell_item" v-for="(item, index) in dataList" :key="index"><span class="sign"></span><div class="mystyle"><div>销售订单：{{ item.BillNo }}</div></div><div class="table_wrap" style="z-index: 999"><draggable class="list-group" :list="item.Entries" item-key="id" group="people" @change="onChange1"><div v-for="(items, indexs) in item.Entries" :key="indexs" style="padding: 10px"><div>{{ items }}</div></div></draggable></div></van-cell></van-list><van-list style="width: 50vw; margin-right: 10px" :loading="loading" :finished="finished" @load="onLoad"><van-cell class="cell_item myCell"><van-dropdown-menu><van-dropdown-item v-model="currentValue" :options="newList" /><van-button style="position: absolute; top: 12px; right: 15px; width: 100px; height: 55px; z-index: 999999999" type="info" size="small">提交</van-button></van-dropdown-menu><div class="table_wrap" style="height: 275px"><draggable class="list-group" :list="listObj.Entries" item-key="id" group="people" @change="onChange2"><div v-for="(items, index) in listObj.Entries" :key="index" style="padding: 10px"><div>{{ items }}</div></div></draggable></div></van-cell></van-list></div></div></div>
</template>
<script>
import Draggable from 'vuedraggable';
export default {name: 'productlist',components: { Draggable },data() {return {loading: false,finished: true,isLoad: false,dataList: [],newList: [{ text: '1号线', value: 0 },{ text: '2号线', value: 1 },{ text: '3号线', value: 2 },{ text: '4号线', value: 3 }],currentValue: 0,listObj: {BillNo: '1号线',Entries: []}};},mounted() {this.userInfo = JSON.parse(localStorage.getItem('userInfo'));this.onSearchClick();},methods: {onLeftClick() {this.$router.push('/');},onLoad() {if (this.isLoad) {this.page++;this.onSearchClick();}},async onSearchClick() {this.dataList = [{BillNo: 'XSDD01',Entries: ['物料:屏幕;客户:山东', '物料:手机;客户:四川', '物料:电脑;客户:河南', '物料:机箱;客户:北京']}];},onChange1(evt) {console.log('数据列表:', evt);},onChange2(evt) {console.log('响应列表:', evt);}}
};
</script>
<style scoped>
::v-deep .van-popup--top {--dynamic-width: 50vw;left: calc(var(--dynamic-width) + 5px);width: calc(var(--dynamic-width) - 10px);
}
.list_wrap.scroll_div {max-height: calc(100vh - 123px);
}
.custom-width {min-width: 200px;
}
.customWidth {min-width: 100px;
}
.myStyle {width: 50vw;padding: 0 5px;font-size: 12px !important;
}
.myCell {margin: 0 5px 0 0;
}
::v-deep .van-dropdown-menu__bar {position: relative;height: 40px;border-bottom: 1px solid #e5e5e5;
}
::v-deep .van-dropdown-menu__title--active,
::v-deep .van-dropdown-item__option--active .van-dropdown-item__icon,
::v-deep .van-dropdown-item__option--active {color: #0860b9;
}
::v-deep .van-overlay {background-color: rgba(0, 0, 0, 0);
}::v-deep .van-dropdown-menu__item {justify-content: left;
}
</style>

3.友情提示，这个库使用方法其实很简单，因为看别人写的比较复杂，自己才写一个Demo 供大家理解，其实这个库中，最重要的就是这个属性 group="people" ，它决定了哪些组件可以相互拖拽，就相当于一个 key，相同 key 的可以相互拖拽。