<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>
