158 lines
4.4 KiB
Vue
158 lines
4.4 KiB
Vue
<template>
|
|
<div class="twoDndList">
|
|
<div class="twoDndList-list" :style="{width:width1}">
|
|
<h3>{{list1Title}}</h3>
|
|
<draggable :list="list1" class="dragArea" :options="{group:'article'}">
|
|
<div class="list-complete-item" v-for="element in list1">
|
|
<div class="list-complete-item-handle">[{{element.id}}] {{element.title}}</div>
|
|
<div style="position:absolute;right:0px;">
|
|
<a style="float: left ;margin-top: -20px;margin-right:5px;" :href="'/article/edit/'+element.id" target="_blank"><i style="color:#20a0ff" class="el-icon-information"></i></a>
|
|
<span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)">
|
|
<i style="color:#ff4949" class="el-icon-delete"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</draggable>
|
|
</div>
|
|
|
|
<div class="twoDndList-list" :style="{width:width2}">
|
|
<h3>{{list2Title}}</h3>
|
|
<draggable :list="filterList2" class="dragArea" :options="{group:'article'}">
|
|
<div class="list-complete-item" v-for="element in filterList2">
|
|
<div class='list-complete-item-handle2' @click="pushEle(element)"> [{{element.id}}] {{element.title}}</div>
|
|
<a style="float: right ;margin-top: -20px;" :href="'/article/edit/'+element.id" target="_blank"><i style="color:#20a0ff" class="el-icon-information"></i></a>
|
|
</div>
|
|
</draggable>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import draggable from 'vuedraggable'
|
|
export default {
|
|
name: 'twoDndList',
|
|
components: { draggable },
|
|
computed: {
|
|
filterList2() {
|
|
return this.list2.filter(v => {
|
|
if (this.isNotInList1(v)) {
|
|
return v
|
|
}
|
|
return false;
|
|
})
|
|
}
|
|
},
|
|
props: {
|
|
list1: {
|
|
type: Array,
|
|
default() {
|
|
return []
|
|
}
|
|
},
|
|
list2: {
|
|
type: Array,
|
|
default() {
|
|
return []
|
|
}
|
|
},
|
|
list1Title: {
|
|
type: String,
|
|
default: 'list1'
|
|
},
|
|
list2Title: {
|
|
type: String,
|
|
default: 'list2'
|
|
},
|
|
width1: {
|
|
type: String,
|
|
default: '48%'
|
|
},
|
|
width2: {
|
|
type: String,
|
|
default: '48%'
|
|
}
|
|
},
|
|
methods: {
|
|
isNotInList1(v) {
|
|
return this.list1.every(k => v.id !== k.id)
|
|
},
|
|
isNotInList2(v) {
|
|
return this.list2.every(k => v.id !== k.id)
|
|
},
|
|
deleteEle(ele) {
|
|
for (const item of this.list1) {
|
|
if (item.id === ele.id) {
|
|
const index = this.list1.indexOf(item);
|
|
this.list1.splice(index, 1)
|
|
break
|
|
}
|
|
}
|
|
if (this.isNotInList2(ele)) {
|
|
this.list2.unshift(ele)
|
|
}
|
|
},
|
|
pushEle(ele) {
|
|
this.list1.push(ele)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
.twoDndList {
|
|
background: #fff;
|
|
padding-bottom: 40px;
|
|
&:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
.twoDndList-list {
|
|
float: left;
|
|
padding-bottom: 30px;
|
|
&:first-of-type {
|
|
margin-right: 2%;
|
|
}
|
|
.dragArea {
|
|
margin-top: 15px;
|
|
min-height: 50px;
|
|
padding-bottom: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-complete-item {
|
|
cursor: pointer;
|
|
position: relative;
|
|
padding: 5px 12px;
|
|
margin-top: 4px;
|
|
border: 1px solid #bfcbd9;
|
|
transition: all 1s;
|
|
}
|
|
|
|
.list-complete-item-handle {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
margin-right: 50px;
|
|
}
|
|
.list-complete-item-handle2{
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.list-complete-item.sortable-chosen {
|
|
background: #4AB7BD;
|
|
}
|
|
|
|
.list-complete-item.sortable-ghost {
|
|
background: #30B08F;
|
|
}
|
|
|
|
.list-complete-enter, .list-complete-leave-active {
|
|
opacity: 0;
|
|
}
|
|
</style>
|