vuedraggable 拖拽 应用 不同列表之间的拖拽npm install vuedraggable
main.js 文件
import VueDraggable from 'vuedraggable';
Vue.use(VueDraggable);
<template>
<div>
<el-row style="55%;float: left;" class="model">
<el-col class="model-box" :span="5" v-for="(item,index) in banks" :key="index">
<!-- <img src="../../../img/icon-3.png" /> -->
<div class="name">{{item.name}}</div>
</el-col>
</el-row>
<el-row style="40%;float: left;">
<el-col :span="16">
<div class="drag-box">
<div class="drag-box-item">
<p class="title">银行排序</p>
<div class="item-title">注：可拖动银行进行排序展示</div>
<el-row class="leftHeight">
<el-col :span="3">
<div v-for="i in banks.length" :key="i" class="drag-num">{{i}}、</div>
</el-col>
<el-col :span="21">
<draggable v-model="banks" :options="dragOptions">
<transition-group tag="div" id="banks" class="item-ul">
<div v-for="a in banks" :key="a.id" class="drag-list">{{a.name}}</div>
</transition-group>
</draggable>
</el-col>
</el-row>
</div>
</div>
<el-form>
<div class="drag-box">
<div class="drag-box-item">
<el-row class="title">
<el-col :span="14">银行卡片排序</el-col>
<el-col :span="10">
<el-form-item label="选择银行：">
<el-select
v-model="searchForm.bankId"
placeholder="请选择"
@change="getCardListByBankId"
>
<el-option label="全部" value></el-option>
<el-option
v-for="(item, index) in banks"
:key="index"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<div class="item-title">注：可拖动卡片进行排序展示</div>
<el-row class="leftHeight">
<el-col :span="21">
<draggable v-model="cardList" :options="dragOptions2">
<transition-group tag="div" id="cardList" class="item-ul">
<div v-for="c in cardList" :key="c.id" class="drag-list">{{c.name}}</div>
</transition-group>
</draggable>
</el-col>
</el-row>
</div>
</div>
<div class="btns text-center">
<el-button type="primary" class="send" @click.native="sendChange">提交</el-button>
<el-button @click.native="removeChange">取消</el-button>
</div>
</el-form>
</el-col>
</el-row>
</div>
</template>
<script>
import draggable from 'vuedraggable';
import { mapGetters } from 'vuex';
import BaseExtend from '@/extends/base.extend';
import OrgSelect from '@/components/OrgSelect';
export default {
extends: BaseExtend,
components: {
OrgSelect,
draggable
},
data() {
return {
// 银行列表
banks: [],
cardList: [],
searchForm: {
bankId: ''
},
endBank: [],
endCard: [],
// 拖动 参数
dragOptions: {
animation: 120,
scroll: true,
sort: true,
group: 'sortlist',
ghostClass: 'ghost-style'
},
// 参数
dragOptions2: {
animation: 120,
scroll: true,
sort: true,
group: 'sortCardlist',
ghostClass: 'ghost-style'
}
};
},
computed: {
myHeader: function() {
return {
// eslint-disable-next-line
authToken: window.localStorage.getItem('token')
};
}
},
created() {
this.getBank();
},
methods: {
//获取排序银行列表
getBank: function() {
this.$api.getDistBankSortList().then(res => {
if (res.success) {
this.banks = res.data;
}
});
},
// 根据银行id获取所属该银行的信用卡类型
getCardListByBankId: function() {
this.cardList = [];
this.$api.getDistCardSortList(this.searchForm).then(res => {
if (res.success) {
this.cardList = res.data;
}
});
},
// 提交
sendChange: function() {
const form = {
card_sort: [],
bankCardStr: []
};
this.banks.forEach((item, index) => {
item.sort = index + 1;
});
this.cardList.forEach((item, index) => {
item.sort = index + 1;
});
form.bankCardStr = JSON.stringify(this.cardList);
form.bankStr = JSON.stringify(this.banks);
this.$api.distConfigSetupSort(form).then(res => {
if (res.success) {
this.successMessage('修改成功');
}
});
},
// 取消
removeChange: function() {
this.getBank();
}
}
};
</script>
<style scoped>
.btns {
margin-top: 60px;
}
.btns .send {
margin-right: 30px;
}
.title {
margin-bottom: 20px;
}
.drag-box {
padding: 10px 0;
}
.drag-box-item {
padding: 15px;
background-color: #eee;
border-radius: 6px;
border: 1px #e1e4e8 solid;
}
.item-title {
color: #666;
font-size: 12px;
}
.drag-num {
font-size: 14px;
color: #333;
line-height: 41px;
margin: 10px 5px 10px 0;
}
.leftHeight {
max-height: 300px;
overflow: scroll;
}
.leftHeight::-webkit-scrollbar {
0;
}
.drag-list {
font-size: 14px;
color: #333;
padding: 10px;
margin: 10px 0;
background-color: #fff;
border-radius: 6px;
cursor: pointer;
border: 1px #e1e4e8 solid;
/* -webkit-transition: border 0.3s ease-in;
transition: border 0.3s ease-in; */
}
.drag-list:hover {
border: 1px solid #20a0ff;
}
.ghost-style {
display: block;
color: transparent;
border-style: dashed;
}
.model {
margin: 5% 3% 5% 1%;
padding: 20px;
border: 1px solid #888888;
border-radius: 10px;
30%;
float: left;
text-align: center;
}
.model-box {
border: 1px solid #e8e8e8;
border-radius: 10px;
padding: 5px;
margin: 0.5% 2% 3% 2%;
height: 100px;
}
.model-box div.name {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
</style>