1.通过 npm 或 yarn 安装 vuedraggable 库
npm install vuedraggable
yarn 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>