由于公司最近需要开发一个后台项目，里面有用到一个拖拽的效果所以去网上找了一些资料，我们选择的是vuedraggable，但开发过程中遇到了一个问题，话不多说上代码
<template>
<div>
<vuedraggable
class="left"
id="left"
v-model="list1"
group="people"
:options="dragOptions"
>
<transition-group tag="div" style="heiht:100%">
<div v-for="item in list1" :key="item" class="item">
<p>{{ item }}</p>
</div>
</transition-group>
</vuedraggable>
<vuedraggable
class="right"
v-model="list2"
group="people"
:options="dragOptions"
>
<transition-group tag="div">
<div v-for="item in list2" :key="item" class="item">
<p>{{ item }}</p>
</div>
</transition-group>
</vuedraggable>
</div>
</template>
<script>
import vuedraggable from 'vuedraggable'
export default {
data() {
return {
dragOptions: {
animation: 120,
scroll: true,
group: 'sortlist',
ghostClass: 'ghost-style'
},
list1: [1, 3, 5, 7, 9],
list2: [2, 4, 6, 8, 10]
}
},
components: {
vuedraggable
},
mounted() {
}
}
</script>
<style scoped>
.item {
width: 300px;
height: 50px;
background-color: #42b983;
color: #ffffff;
margin-top: 10px;
transform: scale(0.9);
}
.left,
.right {
display: inline-block;
width: 40%;
height: 500px;
border: 2px solid #333;
}
</style>
上面的代码会出现一个问题，拖入框内的白色区域无法进行替换，这样就是和产品需求不符，为了解决这个问题了，我看了会这个插件的源码，发现里面有一个容器，只要拖入这个容器就会在选框数组的后面push进当前这个值，上代码
<template>
<div>
<vuedraggable
class="left"
id="left"
v-model="list1"
group="people"
:options="dragOptions"
>
<transition-group tag="div" style="heiht:100%">
<div v-for="item in list1" :key="item" class="item">
<p>{{ item }}</p>
</div>
</transition-group>
</vuedraggable>
<vuedraggable
class="right"
v-model="list2"
group="people"
:options="dragOptions"
>
<transition-group tag="div">
<div v-for="item in list2" :key="item" class="item">
<p>{{ item }}</p>
</div>
</transition-group>
</vuedraggable>
</div>
</template>
<script>
import vuedraggable from 'vuedraggable'
export default {
data() {
return {
dragOptions: {
animation: 120,
scroll: true,
group: 'sortlist',
ghostClass: 'ghost-style'
},
list1: [1, 3, 5, 7, 9],
list2: [2, 4, 6, 8, 10]
}
},
components: {
vuedraggable
},
mounted() {
console.log(
(document.getElementById('left').firstChild.style.height = '100%')
)
}
}
</script>
<style scoped>
.item {
width: 300px;
height: 50px;
background-color: #42b983;
color: #ffffff;
margin-top: 10px;
transform: scale(0.9);
}
.left,
.right {
display: inline-block;
width: 40%;
height: 500px;
border: 2px solid #333;
}
</style>
