我正在使用 Vue draggable 并且在将元素从一个框拖动到另一个框时,它正在移动到同一个框,但不能在其他框中放置/移动。假设我想将'1' 从 box 1 移动到 box 2。它不可拖动到另一个框。为了显示数据在数组中的方式,我使用了显示数据按钮来记录数据。检查元素的顺序。
这里有什么问题?
VUE 代码
<template>
<div id="app">
<!-- LOG ALL DATA -->
<button type="button" name="button" @click="showData()">show data</button>
<div class="container">
<draggable :list="numbers[index]" class="box" v-for="(array, index) in numbers">
<div class="heading">
box {{ index + 1}}
</div>
<div class="box-data" v-for="x in array">
{{ x }}
</div>
</draggable>
</div>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
data(){
return {
numbers: [
[1, 2, 3, 4, 5],
[6, 7, 8],
[9, 10, 11, 12]
],
}
},
components: {
draggable,
},
methods: {
showData() {
console.table(this.numbers);
},
}
}
</script>
<style>
#app{
height: 100%;
}
html, body{
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100%;
}
button{
padding: 1rem;
margin: 1rem;
background-color: #984636;
color: white;
}
.container{
background-color: bisque;
padding: 16px;
margin: 16px;
height: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.box{
width: 300px;
height: 100%;
background-color: pink;
}
.box-data{
padding: .5rem;
margin: 1rem;
background-color: #f6f7f8;
}
.heading{
text-align: center;
margin-top: 1rem;
}
</style>