Dropping zone state
Besides make the item being dragged transparent.
You may want to give users a hint about where you can drop the item.
So we expose a few useful states to the dropping zone.
// const { propsItem } = useDroppable(/* ... */)
const { propsItem, hoverState } = useDroppable(/* ... */)
Useful properties
The hoverState has a few properties, there are 3 that we want to focus on here
dragging
: whether there is any ongoing dndhover
: whether the dragging item is currently on the top of this drop zoneaccepted
: whether the current dropzone wishes to accept this dragging item
Example
Let's try to add a background to indicate whether it is allowed to be dropped into the container
<template>
<div
class="box"
:style="extraStyle"
v-bind="propsItem"
></div>
</template>
<script setup lang='ts'>
import { useDroppable } from '@mmis1000/vue-dnd';
import { BallType } from "./type";
const props = defineProps({
index: {
type: String,
required: true,
}
});
const emit = defineEmits<{
(ev: 'drop', item: [item: string, target: string]): void
}>()
const { propsItem, hoverState } = useDroppable(
BallType.withFilter(([item, source]) => source !== props.index),
{
onDrop: (ev, [data, source]) => {
console.log(`${data} from ${source} is dropped into ${props.index}`)
emit('drop', [data, props.index])
}
}
);
const extraStyle = computed(() => {
if (!hoverState.dragging) {
return {} // we aren't even dragging
}
if (hoverState.hover) {
if (hoverState.accepted) {
return {
background: 'green'
}
} else {
return {
background: 'red'
}
}
} else {
if (hoverState.accepted) {
return {
background: 'blue'
}
} else {
return {}
}
}
})
</script>
<style>
/* ... */
</style>
Result
example Source
a
b
AB
C