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-inputv-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-icontype="edit"class="my_icon"@click="editClick(index, item)"/><a-icontype="delete"class="my_icon"/></div></div><a-form class="col drag-form"><draggablev-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><divclass="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-inputv-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中文文档 : /vue-draggable/tutorial.html
