vue实现前端列表拖拽功能
作者：我是Superman丶
这篇文章主要为大家详细介绍了如何利用vue实现前端列表拖拽功能,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下
使用组件
yarn add sortablejs --save
Sortable.js中文网 (sortablejs.com)
以下代码只是举个例子， 大家可以举一反三去实现各自的业务功能
<template>
<div>
<el-button type="primary" @click="切换列表(1)">列表一</el-button>
<el-button type="success" @click="切换列表(2)">列表二</el-button>
<el-table
v-if="DataListShow === 1"
:data="DataList1"
ref="refTable1"
class="ELtable"
size="small"
stripe
:key="tableKey1"
:row-key="
(row) => {
return row.prop;
}
"
>
<el-table-column
label="编码"
align="center"
prop="label"
></el-table-column>
<el-table-column
label="名称"
align="center"
prop="label"
></el-table-column>
</el-table>
<el-table
v-if="DataListShow === 2"
:data="DataList2"
ref="refTable2"
class="ELtable"
size="small"
stripe
:key="tableKey2"
:row-key="
(row) => {
return row.prop;
}
"
>
<el-table-column
label="编码"
align="center"
prop="prop"
></el-table-column>
<el-table-column
label="名称"
align="center"
prop="label"
></el-table-column>
</el-table>
</div>
</template>
<script>
// 引入Sortable表格拖拽插件
import Sortable from "sortablejs";
//引入模拟的data数据
import DataList1 from "./DataList1.js";
import DataList2 from "./DataList2.js";
export default {
name: 'HelloWorld',
data(){
return {
DataListShow:1,
//第1个表格的配置
tableKey1:0,
DataList1:DataList1,
//第2个表格的配置
tableKey2:0,
DataList2:DataList2,
}
},
mounted() {
//开始 行拖拽
this.rowDrop1();
},
methods:{
切换列表(列表号){
this.DataListShow = 列表号
this.$nextTick(() => {
if(列表号 === 1){
//启动列表一拖拽
this.rowDrop1();
}else{
//启动列表二拖拽
this.rowDrop2();
}
});
},
/**
* 第一个表格的
* 行拖拽
*/
rowDrop1() {
window.aaa = this
const _this = this;
const wrapperTr = this.$refs.refTable1.$el.querySelector(".el-table__body-wrapper tbody");
this.sortable = Sortable.create(wrapperTr, {
handle:'.el-table__row',
animation: 350,
delay: 0,
easing:'cubic-bezier(0.34, 1.56, 0.64, 1)',
onEnd: (evt) => {
const oldItem = _this.DataList1[evt.oldIndex];
_this.DataList1.splice(evt.oldIndex, 1);
_this.DataList1.splice(evt.newIndex, 0, oldItem);
_this.reDrawTable1();
// 每一次拖拽后都要重绘一次
},
});
},
/**
* 第一个表格的
* 触发表格重绘
*/
reDrawTable1() {
this.tableKey1 = Math.random();
this.$nextTick(() => {
// this.rowDrop();
this.rowDrop1();
});
},
/**
* 第二个表格的
* 行拖拽
*/
rowDrop2() {
const _this = this;
// console.log("数据", this.schemas);
const wrapperTr = this.$refs.refTable2.$el.querySelector(".el-table__body-wrapper tbody");
this.sortable = Sortable.create(wrapperTr, {
handle:'.el-table__row',
animation: 350,
delay: 0,
easing:'cubic-bezier(0.34, 1.56, 0.64, 1)',
onEnd: (evt) => {
const oldItem = _this.DataList2[evt.oldIndex];
_this.DataList2.splice(evt.oldIndex, 1);
_this.DataList2.splice(evt.newIndex, 0, oldItem);
_this.reDrawTable2();
// 每一次拖拽后都要重绘一次
},
});
},
/**
* 第二个表格的
* 触发表格重绘
*/
reDrawTable2() {
this.tableKey2 = Math.random();
this.$nextTick(() => {
// this.rowDrop();
this.rowDrop2();
});
},
}
}
</script>DataList1.js
export default [
{
disabled: true,
isCheck: true,
fixed:true,
width: "100px",
label: "姓名",
prop: "name"
},
{
disabled: false,
isCheck: true,
width: "180px",
label: "单位",
prop: "unitName"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "部门",
prop: "departmentName"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "性别",
prop: "sex"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "出生年月",
prop: "birthday"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "籍贯",
prop: "places"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "参加工作时间",
prop: "workTime"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "行政职务",
prop: "duty"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "行政职务时间",
prop: "dutyTime"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "行政职级",
prop: "jobGrade"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "行政职级时间",
prop: "jobGradeTime"
},
{
disabled: false,
isCheck: true,
width: "110px",
label: "等级",
prop: "rank"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "等级时间",
prop: "rankTime"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "法律职务",
prop: "legislation"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "法律职务时间",
prop: "legislationTime"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "全日制学历",
prop: "fullTimeEducation"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "全日制学位",
prop: "fullTimeDegree"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "全日制专业",
prop: "fullTimeMajor"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "政治面貌",
prop: "politicsStatus"
},
];DataList2.js
export default [
{
disabled: true,
isCheck: true,
fixed:true,
width: "100px",
label: "还是",
prop: "name"
},
{
disabled: false,
isCheck: true,
width: "180px",
label: "撒大哥",
prop: "unitName"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "官方",
prop: "departmentName"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "体育",
prop: "sex"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "精明能干",
prop: "birthday"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "可以广泛",
prop: "places"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "发公告",
prop: "workTime"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "人同意",
prop: "duty"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "大幅度发给",
prop: "dutyTime"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "就发过火",
prop: "jobGrade"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "try二食堂",
prop: "jobGradeTime"
},
{
disabled: false,
isCheck: true,
width: "110px",
label: "结果",
prop: "rank"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "分班表",
prop: "rankTime"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "沃尔沃二",
prop: "legislation"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "就体育与",
prop: "legislationTime"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "消防管道发给",
prop: "fullTimeEducation"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "宣传部成本",
prop: "fullTimeDegree"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "明白你们帮你们",
prop: "fullTimeMajor"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "大概的电饭锅电饭锅",
prop: "politicsStatus"
},
];以上就是vue实现前端列表拖拽功能的详细内容，更多关于vue列表拖拽的资料请关注脚本之家其它相关文章！