Vuedraggable - prevent items sharing an location
I have the following vue 2 component that uses the vuedraggable library. This renders two rows of four "drop zones" for a total of 8 areas that are capable of holding the draggable items (of which I have created two). These items should be able to reside in any of the eight locations, just not simultaneously. The dragging aspect works as expected, but I don't know how to prevent these draggable items from sharing the same drop zone.
<template>
<div>
<div v-for="(row, i) in rows" :key="i" class="row">
<div v-for="item in row.items" :key="item.key" class="col">
<draggable class="drop-zone" group="items" :data-ref="item.key">
<div v-if="item.name" class="draggable-item">
{{ item.name }}
</div>
</draggable>
</div>
</div>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
components: {
draggable,
},
data() {
return {
rows: [
{
items: [
{ key: 1, name: "One" },
{ key: 2, name: "Two" },
{ key: 3, name: null },
{ key: 4, name: null },
],
},
{
items: [
{ key: 5, name: null },
{ key: 6, name: null },
{ key: 7, name: null },
{ key: 8, name: null },
],
},
],
};
},
};
</script>
<style scoped>
.row {
padding: 10px;
display: flex;
}
.col {
padding: 10px;
display: flex;
}
.drop-zone {
min-height: 60px;
padding: 10px;
background-color: lightgray;
display: flex;
width: 100%;
}
.draggable-item {
padding: 10px;
background-color: red;
cursor: grab;
display: flex;
width: 100%;
}
</style>
There is also the undesirable behavior where an item that is dropped outside of a drop zone will fall to the closest zone and I would like to prevent that, i.e. a draggable item must be placed within the drop zone or else it should not be moved.
I appreciate any guidance that you're able to offer!
Please or to participate in this conversation.