Drag and Drop operation on MusicCard

app/components/action/Draggable.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { useDraggable } from '@vue-dnd-kit/core';
+import { computed } from 'vue';
+
+const { index, source } = defineProps<{
+    index: number;
+    source: any[];
+}>();
+
+const { elementRef, handleDragStart, isOvered, isDragging } = useDraggable({
+    data: computed(() => ({
+        index,
+        source,
+    })),
+});
+</script>
+
+<template>
+    <div ref="elementRef" @pointerdown="handleDragStart" :class="{
+        'is-over': isOvered,
+        'is-dragging': isDragging,
+    }" class="draggable">
+        <slot />
+    </div>
+</template>
+
+<style>
+.draggable {
+    cursor: move;
+    user-select: none;
+    touch-action: none;
+}
+
+.is-dragging {
+    opacity: 0.2;
+}
+
+.is-over {
+    padding-top: 0.5rem;
+    border-top: 2px solid var(--border);
+}
+</style>