AntDesign vue 结合 vuedraggable 实现拖拽排序功能

1. 首先引入 vuedraggable 第三方插件

npm i -S vuedraggable

2. 在需要使用的页面引入

import draggable from "vuedraggable";

3. 在页面中使用

<template>
  <!-- 章节管理组件 -->
  <div>
    <div class="list" v-for="(item, index) in catalogueArr" :key="item.id">
      <div class="big_list">
        <div class="list_left">
          {{ index + 1 }}.
          <span v-show="item.flag == 0">{{ item.title }}</span>
          <span class="input" v-show="item.flag == 1">
            <a-input
              v-model="item.title"
              placeholder="请输入章节名称"
              style="width: 500px"
              :maxLength="32"
              @blur="editInputBlur(item, index)"
            />
            <span>{{ item.title.length }}/32</span>
          </span>
        </div>
        <div class="list_right">
          <a-icon
            type="edit"
            class="my_icon"
            @click="editClick(index, item)"
          />
          <a-icon
            type="delete"
            class="my_icon"
          />
        </div>
      </div>
      <a-form class="col drag-form">
        <draggable
          v-model="item['lessonsNodes']"
          group="site"
          animation="300"
          scrollSensitivity="0px"
          dragClass="dragClass"
          ghostClass="ghostClass"
          @change="onChange(item)"
          chosenClass="chosenClass"
          @start="onStart"
          @end="onEnd($event)"
        >
          <transition-group>
            <div
              class="small_list"
              v-for="el in item.lessonsNodes"
              :key="el.lessonsId"
            >
              <div class="small_list_left">{{ el.name }}</div>
            </div>
          </transition-group>
        </draggable>
      </a-form>
    </div>

    <div class="input_box" v-if="addCatalogue">
      <span class="add_input">
        <a-input
          v-model="addaddCatalogueTitle"
          placeholder="请输入章节名称,32个字以内"
          :maxLength="32"
          style="width: 600px"
          @blur="addInputBlur"
        />
        <span>{{ addaddCatalogueTitle.length }}/32</span>
      </span>
      <div class="input_box_right">
        <a-icon type="edit" class="my_icon" />
        <a-icon type="delete" class="my_icon" @click="addDel" />
      </div>
    </div>
    <div class="add_chapter">
      <a-icon type="plus" class="add" />
      <span>新增章节</span>
    </div>
  </div>
</template>

<script>
// npm i -S vuedraggable   拖拽组件
import draggable from "vuedraggable";
import {
  CatalogueSortOperationApi,
  SaveCatalogueApi,
  UpdCatalogueApi,
  GetCatalogueTreeResultApi,
} from "@/request/api/coursManage";
import { message, Modal } from "ant-design-vue";
export default {
  props: ["courseNo"],
  created() {
    this.GetCatalogueTreeResultApiFn();
  },
  data() {
    return {
      catalogueArr: [], // 章节的数组
      addCatalogue: false, // 是否新增章节
      addaddCatalogueTitle: "", // 新增章节标题
      drag: false, // 拖拽
      dragArr: [], // 拖拽的数组
      dragItem: {}, //
      title: "",
    };
  },
  components: { draggable },
  methods: {
    // 拖拽开始
    onStart() {
      this.drag = true;
    },
    // 拖拽中
    onChange(data) {
      this.dragArr.push(data);
      if (this.dragArr.length === 1) {
        this.dragItem = this.dragArr[this.dragArr.length - 1];
      } else {
        this.dragItem = this.dragArr[this.dragArr.length - 2];
      }
    },
    // 拖拽结束
    onEnd(e) {
      this.$nextTick(() => {
        this.drag = false;
        // 处理成后端想要的数据格式
        if (this.dragItem.lessonsNodes) {
          let arr = [];
          this.dragItem.lessonsNodes.map((item, index) => {
            arr.push({ id: item.lessonsId, sort: index });
          });
          // 将数据传回后端
          CatalogueSortOperationApi({
            catalogueNo: this.dragItem.catalogueNo,
            lesssons: arr,
          }).then(({ code, data }) => {
            if (code == 200) {
              message.success("排序成功", 1);
            }
          });
        }
      });
    },
    // 图标编辑按钮
    editClick(index, item) {
      this.title = item.title;
      this.addCatalogue = false;
      this.catalogueArr.forEach((item) => {
        item.flag = 0;
      });
      this.catalogueArr[index].flag = 1;
    },
    // 编辑输入框失焦事件
    editInputBlur(item, index) {
      UpdCatalogueApi({
        courseNo: this.courseNo,
        id: item.id,
        title: item.title,
      }).then(({ code }) => {
        if (code == 200) {
          message.success("修改成功");
        } else {
          this.addCatalogue = false;
          this.catalogueArr.forEach((item) => {
            item.flag = 0;
          });
          item.title = this.title;
        }
      });
      this.catalogueArr[index].flag = 0;
    },
    // 新增章节失焦事件
    addInputBlur() {
      SaveCatalogueApi({
        courseNo: this.courseNo,
        title: this.addaddCatalogueTitle,
      }).then(({ code }) => {
        if (code == 200) {
          message.success("新增成功");
          this.$router.go(0);
          this.addCatalogue = false;
        }
      });
    },
    // 新增章节的删除
    addDel() {
      this.addaddCatalogueTitle = "";
      this.addCatalogue = false;
    },
    GetCatalogueTreeResultApiFn() {
      GetCatalogueTreeResultApi({ courseNo: this.courseNo }).then(
        ({ code, data }) => {
          if (code == 200) {
            this.catalogueArr = data;
          }
        }
      );
    },
  },
};
</script>
 
<style lang="less" scoped>
/*定义要拖拽元素的样式*/
.ghostClass {
  background-color: #f2f2f2 !important;
}
.chosenClass {
  background-color: #f2f2f2 !important;
  opacity: 1 !important;
}
.dragClass {
  background-color: #f2f2f2 !important;
  opacity: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}
.col {
  width: calc(100% - 22px);
  flex: 1;
  border-radius: 5px;
  background: #fff;
}
/* 这里一定要给一个最小高度, 不然空的父级拖拽不进去 */
.drag-form {
  /deep/ span {
    display: block;
    min-height: 1px;
  }
}

.my_icon {
  font-size: 26px;
  margin-right: 20px;
}
.list {
  margin-bottom: 10px;
  .big_list {
    width: 70%;
    height: 60px;
    line-height: 60px;
    background-color: #f2f2f2;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .list_left {
      margin-left: 20px;
      .input {
        position: relative;
        span {
          position: absolute;
          top: -22px;
          right: 6px;
        }
      }
    }
  }
  .small_list {
    border: 1px solid #ccc;
    width: 69%;
    height: 50px;
    line-height: 50px;
    margin-left: 2%;
    display: flex;
    justify-content: space-between;
    .small_list_left {
      margin-left: 20px;
    }
    .small_list_right {
      margin-right: 20px;
    }
  }
}
// 新增章节的输入框
.input_box {
  width: 70%;
  height: 60px;
  line-height: 60px;
  background-color: #f2f2f2;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .add_input {
    position: relative;
    span {
      position: absolute;
      top: 0;
      right: 6px;
    }
  }
  .ant-input {
    width: 400px;
    margin-left: 20px;
  }
}
// 新增章节
.add_chapter {
  width: 70%;
  height: 60px;
  line-height: 60px;
  background-color: #f2f2f2;
  padding-left: 20px;
  .add {
    font-size: 20px;
    color: #409eff;
    margin-right: 10px;
  }
}
</style>

4. 页面效果

vue.draggable中文文档 : https://www.itxst.com/vue-draggable/tutorial.html