vue 拖拽排版 vuedraggable（三方组件）

<template>
  <a-card :bordered="false">
    <div class="box" :style="{'min-height': clientHeight + 'px'}">
      <div class="home-box">
        <!-- 左 -->
        <div class="bor box-comtentLeft">
          <draggable class="left" v-model="list1" group="people" :options="dragOptions">
            <div v-for="item in list1" :key="item">
              <div class="banner-box" v-if="item == 'banner'">
                <span class="banner-text">轮播图</span>
                <img
                  style="margin-left:30px"
                  src="../../../src/assets/image/banner.jpg"
                  width="80%"
                />
              </div>
              <div class="notice-box" v-if="item == 'notice'">
                <div class="notice-text">
                  <img
                    style="margin-left:30px"
                    src="../../../src/assets/image/notice.jpg"
                    width="80%"
                    alt
                  />
                </div>
              </div>
              <div class="school-box" v-if="item == 'introduction'">
                <span class="school-text">快捷入口</span>
                <img
                  style="margin-left:30px"
                  src="../../../src/assets/image/schoolIntroduction.jpg"
                  width="80%"
                  alt
                />
              </div>
              <div class="trainBusiness-box" v-if="item == 'train'">
                <img
                  style="margin-left:30px"
                  src="../../../src/assets/image/train.jpg"
                  width="80%"
                  alt
                />
              </div>
              <div class="contact-box" v-if="item == 'contactMy'">
                <!-- 联系我们 -->
                <img
                  style="margin-left:30px"
                  src="../../../src/assets/image/contactMy.jpg"
                  width="80%"
                  alt
                />
              </div>
            </div>
          </draggable>
        </div>
        <!-- 双向箭头 -->
        <div class="box-arrow">
          <a-icon type="swap" class="arrow" />
        </div>
        <!-- 中间 -->
        <div class="bor box-comtentMiddle">
          <div class="box-middle-img">
            <draggable class="right" v-model="list2" group="people" :options="dragOptions">
              <div v-for="item in list2" :key="item" class="item">
                <img
                  v-if="item == 'banner'"
                  style="margin-left:23px;"
                  src="../../../src/assets/image/banner.jpg"
                  width="80%"
                />
                <img
                  v-if="item == 'notice'"
                  style="margin-left:20px;"
                  src="../../../src/assets/image/notice.jpg"
                  width="80%"
                  alt
                />
                <img
                  v-if="item == 'introduction'"
                  style="margin-left:25px;"
                  src="../../../src/assets/image/schoolIntroduction.jpg"
                  width="80%"
                  alt
                />
                <img
                  v-if="item == 'train'"
                  style="margin-left:20px;"
                  src="../../../src/assets/image/train.jpg"
                  width="80%"
                  alt
                />
                <img
                  v-if="item == 'contactMy'"
                  style="margin-left:17px;"
                  src="../../../src/assets/image/contactMy.jpg"
                  width="80%"
                  alt
                />
              </div>
            </draggable>
          </div>
          <a-row class="but">
            <a-button @click="empty">清空</a-button>
            <a-button type="primary" style="margin-left:15px" @click="release">发布</a-button>
          </a-row>
        </div>
      </div>
    </div>
  </a-card>
</template>

<script>
// 拖拽排版组件
import draggable from "vuedraggable"
import {homeConfigApi} from "@api/api"
export default {
  name: "homeConfiger",
  components: {
    draggable
  },
  data() {
    return {
      clientHeight: document.documentElement.clientHeight - 185,
      isTab: 1,
      dragOptions: {
        animation: 120,
        scroll: true,
        group: "sortlist",
        ghostClass: "ghost-style"
      },
      list1: ["banner", "notice", "introduction", "train", "contactMy"],
      list2: []
    }
  },
  methods: {
    //清空
    empty() {
      this.list1 = ["banner", "notice", "introduction", "train", "contactMy"]
      this.list2 = []
    },
    //发布
    release() {
      let bannerIndex = this.list2.indexOf('banner')
      let noticeIndex = this.list2.indexOf('notice')
      let introductionIndex = this.list2.indexOf('introduction')
      let trainIndex = this.list2.indexOf('train')
      let contactMyIndex = this.list2.indexOf('contactMy')

      const param = [
        {moduleType:this.list2[0]},
        {moduleType:this.list2[1]},
        {moduleType:this.list2[2]},
        {moduleType:this.list2[3]},
        {moduleType:this.list2[4]},
      ]
      param[bannerIndex].xcxLocation = 1
      param[noticeIndex].xcxLocation = 2
      param[introductionIndex].xcxLocation = 3
      param[trainIndex].xcxLocation = 4
      param[contactMyIndex].xcxLocation = 5

      this.releaseOk(param)
    },
    //发布模块排序
    releaseOk(param){
      homeConfigApi(param).then(res=>{
        if (res.statusBool) {
          this.$message.success(res.message)
          // this. empty()
        } else {
          this.$message.warning(res.message)
        }
      })
    }
    
  }
}
</script>

<style lang="less" scoped>
.home-box {
  display: flex;
  // justify-content: space-between;
}
.box-comtentMiddle {
  margin-left: 0;
}
.box-comtentLeft {
  border: 1px solid rgb(194, 193, 193);
  border-radius: 10px;
}
.banner-box,
.notice-box,
.trainBusiness-box,
.contact-box,
.school-box {
  margin: 5px;
  border: 1px solid rgb(194, 193, 193);
  border-radius: 10px;
}
.banner-text,
.school-text {
  margin-left: 28px;
  font-weight: 800;
  font-size: 13px;
  display: block;
}
.box-arrow {
  margin-left: 40px;
  text-align: center;
  line-height: 600px;
}
.arrow {
  font-size: 200px;
  color: skyblue;
}
.box-middle-img {
  margin-left: 50px;
  padding-top: 13%;
  width: 90%;
  min-height: 93%;
  padding-bottom: 20%;
  box-sizing: border-box;
  background-image: url("../../assets/image/iphone.png");
  background-size: 90% 100%;
  background-repeat: no-repeat;
}
.but {
  position: relative;
  top: 10px;
  bottom: 0px;
  left: 37%;
}
/*const*/
.left,
.right {
  display: inline-block;
  width: 50vh;
  min-height: 68.7vh;
}
</style>