vuedraggable嵌套块拖拽_vuedraggable 拖拽 应用 不同列表之间的拖拽

{{item.name}}

银行排序

注：可拖动银行进行排序展示

{{i}}、

{{a.name}}

银行卡片排序

v-model="searchForm.bankId"

placeholder="请选择"

@change="getCardListByBankId"

>

v-for="(item, index) in banks"

:key="index"

:label="item.name"

:value="item.id"

>

注：可拖动卡片进行排序展示

{{c.name}}

提交

取消

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();

}

}

};

.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 {

width: 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;

width: 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;

}