First drag and drop
Create the event type
Before you set up the drag item and drop zone. You need an event type to pair them
import { createType } from '@mmis1000/vue-dnd'
// the DataType is what you used to identify the item for drag
type DataType = string
export const BallType = createType<DataType>()
import { createType } from '@mmis1000/vue-dnd'
export const BallType = createType()
Setup the drag target
Assume you already have an object on screen for drag
<template>
<div
class="ball"
>...</div>
</template>
<script setup lang="ts">
const props = defineProps({
index: {
type: String,
required: true,
}
});
</script>
<style>
/* ... */
</style>
You can decorate it with the hook
<template>
<div
class="ball"
+ v-bind="propsItem"
>...</div>
</template>
<script setup lang="ts">
+ import { computed } from "vue";
+ import { useDraggable } from '@mmis1000/vue-dnd';
+ import { BallType } from "./type";
const props = defineProps({
index: {
type: String,
required: true,
}
});
+ const { propsItem } = useDraggable(
+ BallType,
+ computed(() => props.index)
+ );
</script>
<style>
/* ... */
</style>
The item should be draggable now
Setup the drop zone
Assume you already have a container on screen for drop item
<template>
<div
class="box"
>...</div>
</template>
<script setup lang="ts">
</script>
<style>
/* ... */
</style>
You can decorate it with the hook
<template>
<div
class="box"
+ v-bind="propsItem"
>...</div>
</template>
<script setup lang="ts">
+ import { useDroppable } from '@mmis1000/vue-dnd';
+ import { BallType } from "./type";
+ const { propsItem } = useDroppable(
+ BallType,
+ {
+ onDrop: (ev, data) => {
+ console.log(`${data} dropped`)
+ }
+ }
+ );
</script>
<style>
/* ... */
</style>
Result
Try to drag the item into drop zone.
It should log the text you write in the drag item on the screen now.
example Source
a ball