zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix[DndList]: fixed drag bug (#1527) 

https://github.com/PanJiaChen/vue-element-admin/issues/1524
This commit is contained in:
花裤衩 2019-01-16 10:18:32 +08:00 committed by Pan
parent 3af14bc297
commit 4afb57a1e5
1 changed files with 14 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/DndList/index.vue
View File

@ -4,7 +4,7 @@
<h3>{{ list1Title }}</h3> <h3>{{ list1Title }}</h3>
<draggable :list="list1" :options="{group:'article'}" class="dragArea"> <draggable :list="list1" :options="{group:'article'}" class="dragArea">
<div v-for="element in list1" :key="element.id" class="list-complete-item"> <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;"> <div style="position:absolute;right:0px;">
<span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)"> <span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)">
<i style="color:#ff4949" class="el-icon-delete"/> <i style="color:#ff4949" class="el-icon-delete"/>
@ -15,9 +15,9 @@
</div> </div>
<div :style="{width:width2}" class="dndList-list"> <div :style="{width:width2}" class="dndList-list">
<h3>{{ list2Title }}</h3> <h3>{{ list2Title }}</h3>
<draggable :list="filterList2" :options="{group:'article'}" class="dragArea"> <draggable :list="list2" :options="{group:'article'}" class="dragArea">
<div v-for="element in filterList2" :key="element.id" class="list-complete-item"> <div v-for="element in list2" :key="element.id" class="list-complete-item">
<div class="list-complete-item-handle2" @click="pushEle(element)"> [{{ element.author }}] {{ element.title }}</div> <div class="list-complete-item-handle2" @click="pushEle(element)">{{ element.id }} [{{ element.author }}] {{ element.title }}</div>
</div> </div>
</draggable> </draggable>
</div> </div>
@ -60,16 +60,6 @@ export default {
default: '48%' default: '48%'
} }
}, },
computed: {
filterList2() {
return this.list2.filter(v => {
if (this.isNotInList1(v)) {
return v
}
return false
})
}
},
methods: { methods: {
isNotInList1(v) { isNotInList1(v) {
return this.list1.every(k => v.id !== k.id) return this.list1.every(k => v.id !== k.id)
@ -90,10 +80,19 @@ export default {
} }
}, },
pushEle(ele) { pushEle(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) this.list1.push(ele)
} }
} }
} }
}
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>