draggable / touchable card v0.1

app/components/Bucket.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bucket" :class="{ 'drag-over': isDragOver }" @dragenter.prevent="onDragEnter"
+  <div class="bucket" ref="bucket" :class="{ 'drag-over': isDragOver }" @dragenter.prevent="onDragEnter"
     @dragover.prevent="onDragOver" @dragleave="onDragLeave" @drop.prevent="onDrop">
     <div v-if="tracks.length === 0" class="bucket-empty">
       Drop cards here
@@ -14,10 +14,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, defineEmits, onMounted } from 'vue'
 import draggable from 'vuedraggable'
 import { useDataStore } from '~/store/data'
 
+const emit = defineEmits<{
+  (e: 'card-dropped', track: any): void
+}>()
+
 const props = defineProps<{
   modelValue?: any[]
   boxId?: string
@@ -27,6 +31,7 @@ const dataStore = useDataStore()
 const isDragOver = ref(false)
 const drag = ref(false)
 const tracks = ref<any[]>(props.modelValue || [])
+const bucket = ref()
 
 watch(() => props.modelValue, (newValue) => {
   if (newValue) {
@@ -37,7 +42,9 @@ watch(() => props.modelValue, (newValue) => {
 if (props.boxId) {
   onMounted(async () => {
     await dataStore.loadData()
-    tracks.value = dataStore.getTracksByboxId(props.boxId)
+    if (props.boxId) {
+      tracks.value = dataStore.getTracksByboxId(props.boxId)
+    }
   })
 }
 
@@ -83,6 +90,13 @@ const onDrop = (e: DragEvent) => {
 const flipCard = (track: any) => {
   track.isFaceUp = !track.isFaceUp
 }
+
+onMounted(() => {
+  // Écouter aussi les événements tactiles personnalisés
+  bucket.value?.addEventListener('card-dropped-touch', (e: CustomEvent) => {
+    emit('card-dropped', e.detail)
+  })
+})
 </script>
 
 <style scoped>