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

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>

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