43 lines
797 B
Vue
43 lines
797 B
Vue
<template>
|
|
<div draggable="true" @dragstart="onDragStart" @dragend="onDragEnd"
|
|
:class="['draggable', { 'is-dragging': isDragging }]">
|
|
<slot :is-dragging="isDragging" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
data: any
|
|
type?: string
|
|
}>()
|
|
|
|
const emit = defineEmits(['dragStart', 'dragEnd'])
|
|
|
|
const isDragging = ref(false)
|
|
|
|
const onDragStart = (e: DragEvent) => {
|
|
isDragging.value = true
|
|
e.dataTransfer?.setData('application/json', JSON.stringify(props.data))
|
|
emit('dragStart', props.data)
|
|
}
|
|
|
|
const onDragEnd = () => {
|
|
isDragging.value = false
|
|
emit('dragEnd')
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.draggable {
|
|
cursor: grab;
|
|
user-select: none;
|
|
}
|
|
|
|
.draggable.is-dragging {
|
|
opacity: 0.5;
|
|
cursor: grabbing;
|
|
}
|
|
</style>
|