vue實(shí)現(xiàn)前端列表拖拽功能
更新時(shí)間：2023年12月19日 14:57:18 作者：我是Superman丶
這篇文章主要為大家詳細(xì)介紹了如何利用vue實(shí)現(xiàn)前端列表拖拽功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下
使用組件
yarn add sortablejs --save
Sortable.js中文網(wǎng) (sortablejs.com)
以下代碼只是舉個例子， 大家可以舉一反三去實(shí)現(xiàn)各自的業(yè)務(wù)功能
<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數(shù)據(jù)
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();
// 每一次拖拽后都要重繪一次
},
});
},
/**
* 第一個表格的
* 觸發(fā)表格重繪
*/
reDrawTable1() {
this.tableKey1 = Math.random();
this.$nextTick(() => {
// this.rowDrop();
this.rowDrop1();
});
},
/**
* 第二個表格的
* 行拖拽
*/
rowDrop2() {
const _this = this;
// console.log("數(shù)據(jù)", 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();
// 每一次拖拽后都要重繪一次
},
});
},
/**
* 第二個表格的
* 觸發(fā)表格重繪
*/
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: "參加工作時(shí)間",
prop: "workTime"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "行政職務(wù)",
prop: "duty"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "行政職務(wù)時(shí)間",
prop: "dutyTime"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "行政職級",
prop: "jobGrade"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "行政職級時(shí)間",
prop: "jobGradeTime"
},
{
disabled: false,
isCheck: true,
width: "110px",
label: "等級",
prop: "rank"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "等級時(shí)間",
prop: "rankTime"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "法律職務(wù)",
prop: "legislation"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "法律職務(wù)時(shí)間",
prop: "legislationTime"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "全日制學(xué)歷",
prop: "fullTimeEducation"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "全日制學(xué)位",
prop: "fullTimeDegree"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "全日制專業(yè)",
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: "發(fā)公告",
prop: "workTime"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "人同意",
prop: "duty"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "大幅度發(fā)給",
prop: "dutyTime"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "就發(fā)過火",
prop: "jobGrade"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "try二食堂",
prop: "jobGradeTime"
},
{
disabled: false,
isCheck: true,
width: "110px",
label: "結(jié)果",
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: "消防管道發(fā)給",
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實(shí)現(xiàn)前端列表拖拽功能的詳細(xì)內(nèi)容，更多關(guān)于vue列表拖拽的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue flex 布局實(shí)現(xiàn)div均分自動換行的示例代碼
這篇文章主要介紹了vue flex 布局實(shí)現(xiàn)div均分自動換行,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章介紹了VUE中v-if與v-show的區(qū)別，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03
在用vite創(chuàng)建vue3項(xiàng)目時(shí)已經(jīng)選擇了添加ESLint,本文就來介紹一下ESLint在項(xiàng)目中需要怎樣配置和使用,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09
如何解決模塊““vue“”沒有導(dǎo)出的成員“ref”問題
這篇文章主要介紹了如何解決模塊““vue“”沒有導(dǎo)出的成員“ref”問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了vue之父組件向子組件傳值并改變子組件的樣式,需要的朋友可以參考下2022-12-12
vue 動態(tài)組件(component :is) 和 dom元素限制(is)用法說明
這篇文章主要介紹了vue 動態(tài)組件(component :is) 和 dom元素限制(is)用法說明，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue element封裝form表單的實(shí)現(xiàn)
本文主要介紹了vue element封裝form表單的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
Vue3 的ref和reactive的用法和區(qū)別示例解析
ref和reactive是Vue3中用來實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式的API,一般情況下,ref定義基本數(shù)據(jù)類型,reactive定義引用數(shù)據(jù)類型,本文給大家介紹Vue3 的ref和reactive的用法和區(qū)別,感興趣的朋友一起看看吧2023-10-10
這篇文章主要給大家介紹了關(guān)于vue將某個組件打包成js并在其他項(xiàng)目使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
本文為大家介紹了VUE中內(nèi)置指令包括：v-text,v-html,v-show,v-if,v-else,v-else-if,v-for,v-on,v-bind,v-model,v-pre,v-cloak,v-once2019-02-02