From 4afb57a1e5524ee453007e0c6e2636f86da52ad7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= <panfree23@gmail.com>
Date: Wed, 16 Jan 2019 10:18:32 +0800
Subject: [PATCH] fix[DndList]: fixed drag bug (#1527)
https://github.com/PanJiaChen/vue-element-admin/issues/1524
---
src/components/DndList/index.vue | 29 ++++++++++++++---------------
1 file changed, 14 insertions(+), 15 deletions(-)
diff --git a/src/components/DndList/index.vue b/src/components/DndList/index.vue
index 43e0bb28..7587daa7 100644
--- a/src/components/DndList/index.vue
+++ b/src/components/DndList/index.vue
@@ -4,7 +4,7 @@
<h3>{{ list1Title }}</h3>
<draggable :list="list1" :options="{group:'article'}" class="dragArea">
<div v-for="element in list1" :key="element.id" class="list-complete-item">
- <div class="list-complete-item-handle">[{{ element.author }}] {{ element.title }}</div>
+ <div class="list-complete-item-handle">{{ element.id }}[{{ element.author }}] {{ element.title }}</div>
<div style="position:absolute;right:0px;">
<span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)">
<i style="color:#ff4949" class="el-icon-delete"/>
@@ -15,9 +15,9 @@
</div>
<div :style="{width:width2}" class="dndList-list">
<h3>{{ list2Title }}</h3>
- <draggable :list="filterList2" :options="{group:'article'}" class="dragArea">
- <div v-for="element in filterList2" :key="element.id" class="list-complete-item">
- <div class="list-complete-item-handle2" @click="pushEle(element)"> [{{ element.author }}] {{ element.title }}</div>
+ <draggable :list="list2" :options="{group:'article'}" class="dragArea">
+ <div v-for="element in list2" :key="element.id" class="list-complete-item">
+ <div class="list-complete-item-handle2" @click="pushEle(element)">{{ element.id }} [{{ element.author }}] {{ element.title }}</div>
</div>
</draggable>
</div>
@@ -60,16 +60,6 @@ export default {
default: '48%'
}
},
- computed: {
- filterList2() {
- return this.list2.filter(v => {
- if (this.isNotInList1(v)) {
- return v
- }
- return false
- })
- }
- },
methods: {
isNotInList1(v) {
return this.list1.every(k => v.id !== k.id)
@@ -90,7 +80,16 @@ export default {
}
},
pushEle(ele) {
- this.list1.push(ele)
+ for (const item of this.list2) {
+ if (item.id === ele.id) {
+ const index = this.list2.indexOf(item)
+ this.list2.splice(index, 1)
+ break
+ }
+ }
+ if (this.isNotInList1(ele)) {
+ this.list1.push(ele)
+ }
}
}
}