AntDesign vue 结合 vuedraggable 实现拖拽排序功能
1. 首先引入 vuedraggable 第三方插件npm i -S vuedraggable2. 在需要使用的页面引入import draggable from "vuedraggable";3. 在页面中使用<template><!-- 章节管理组件 --><div><div class="list" v-for="(item, index) in c
·
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
更多推荐
已为社区贡献1条内容
所有评论(0)