Drag and Drop operation on MusicCard

app/pages/edit.vue

@@ -2,9 +2,11 @@
 import { Search } from 'lucide-vue-next'
 import { Button } from '@/components/ui/button'
 import { InputWithIcon } from '@/components/ui/input'
-import MusicCard from '@/components/ui/musiccard/MusicCard.vue'
 import { Outline } from '@/components/ui/outline'
 import { SidebarTrigger } from '@/components/ui/sidebar'
+import MusicCard from '~/components/internal/musiccard/MusicCard.vue'
+import { DnDOperations, useDroppable } from '@vue-dnd-kit/core'
+import Draggable from '~/components/action/Draggable.vue'
 
 const searchValue = ref('')
 
@@ -66,6 +68,15 @@ const selectTrack = (trackId: number) => {
         track.selected = track.id === trackId
     })
 }
+
+const { elementRef: tracksRef } = useDroppable({
+    data: {
+        source: tracks.value,
+    },
+    events: {
+        onDrop: DnDOperations.applyTransfer,
+    },
+});
 </script>
 
 <template>
@@ -88,9 +99,16 @@ const selectTrack = (trackId: number) => {
                 <InputWithIcon v-model="searchValue" :icon="Search" placeholder="Search..." type="search" icon-size="5"
                     id="user-search" class="w-full" />
 
-                <MusicCard v-for="track in filteredTracks" :key="track.id" :title="track.title" :author="track.author"
-                    :authorLabel="track.authorLabel" :badges="track.badges" :imageUrl="track.imageUrl"
-                    :date="track.date" :selected="track.selected" @click="selectTrack(track.id)" />
+                <div ref="tracksRef" class="space-y-2">
+                    <TransitionGroup name="list" ref="tracksRef">
+                        <Draggable v-for="(track, index) in filteredTracks" :key="track.id" :index="index"
+                            :source="tracks">
+                            <MusicCard :key="track.id" :title="track.title" :author="track.author"
+                                :authorLabel="track.authorLabel" :badges="track.badges" :imageUrl="track.imageUrl"
+                                :date="track.date" :selected="track.selected" @click="selectTrack(track.id)" />
+                        </Draggable>
+                    </TransitionGroup>
+                </div>
             </div>
             <template #sidebar>
                 <Outline padding="none" class="h-full" side="left">
@@ -104,3 +122,25 @@ const selectTrack = (trackId: number) => {
         </NuxtLayout>
     </div>
 </template>
+
+<style>
+.list-move {
+    transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.list-enter-active,
+.list-leave-active {
+    transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.list-enter-from,
+.list-leave-to {
+    opacity: 0;
+    transform: translateY(-20px);
+}
+
+.list-leave-active {
+    position: absolute;
+    pointer-events: none;
+}
+</style>