OrderDrag up down

src/views/ProductQueueView.vue

 <script setup>
 import { ref } from 'vue'
 import GanttChart from '@/components/GanttChart.vue'
+
 const selectedDate = ref('1/1/2024')
 const employees = Array.from({ length: 10 }, (_, i) => `EM${i + 1}`)
-const orders = ['Order1', 'Order2']
+const orders = ref([
+  { id: 1, name: 'ORDER1' },
+  { id: 2, name: 'ORDER2' }
+])
+
+// Drag and drop functionality
+const draggedOrder = ref(null)
+
+const handleDragStart = (order) => {
+  draggedOrder.value = order
+}
+
+const handleDragOver = (event) => {
+  event.preventDefault()
+}
+
+const handleDrop = (targetOrder) => {
+  if (!draggedOrder.value || draggedOrder.value === targetOrder) return
+
+  // Find the indices of the dragged and target orders
+  const draggedIndex = orders.value.findIndex((o) => o.id === draggedOrder.value.id)
+  const targetIndex = orders.value.findIndex((o) => o.id === targetOrder.id)
+
+  // Remove the dragged order from its original position
+  const [removed] = orders.value.splice(draggedIndex, 1)
+
+  // Insert the dragged order at the target position
+  orders.value.splice(targetIndex, 0, removed)
+
+  // Reset the dragged order
+  draggedOrder.value = null
+}
 </script>
 
 <template>
   <v-container class="pa-0">
     <!-- Gantt chart -->
-    <v-sheet class="pa-1 mb-3" style="border-radius: 15px; max-width: 98%; margin-left: auto; margin-right: auto; min-height: 500px;">
+    <v-sheet class="pa-1 mb-3"
+      style="border-radius: 15px; max-width: 98%; margin-left: auto; margin-right: auto; min-height: 500px;">
 
       <!-- Timeline -->
       <v-sheet class="pa-3 mb-3">
         <v-col cols="auto" class="d-flex align-center">
           <v-col cols="auto" class="d-flex align-center" style="background-color: #7E9CD3; border-radius: 15px; ">
             <v-btn class="mr-2" style="background-color: #2B2E3F; color: white;  border-radius: 10px;">&lt; Back</v-btn>
-            <v-btn style="background-color: white; color: black; min-width: 200px; border-radius: 15px;">{{ selectedDate }}</v-btn>
+            <v-btn style="background-color: white; color: black; min-width: 200px; border-radius: 15px;">{{ selectedDate
+              }}</v-btn>
             <v-btn class="ml-2" style="background-color: #2B2E3F; color: white; border-radius: 10px;">Next &gt;</v-btn>
-            <v-btn class="ml-2" style="background-color: white; color: black; border-radius: 10px;"><v-icon>mdi-dots-horizontal</v-icon></v-btn>
+            <v-btn class="ml-2"
+              style="background-color: white; color: black; border-radius: 10px;"><v-icon>mdi-dots-horizontal</v-icon></v-btn>
           </v-col>
           <v-btn class="ml-auto"
             style="background-color: #0077D8; font-weight: bold; color: white; border-radius: 12px; padding: 28px; display: flex; align-items: center; justify-content: center; font-size: 18px;">
@@ -50,13 +85,29 @@ const orders = ['Order1', 'Order2']
 
       <!-- Order Priority -->
       <v-col cols="6">
-        <v-card class="pa-4" style="background-color: white; border-radius: 15px; min-height: 280px;" >
-          <!-- ลำดับความสำคัญวางทับตรงนี้ -->
-          <v-btn v-for="order in orders" :key="order" block class="mb-2" color="#2B2E3F"><!-- ลบอันนี้ -->
-            {{ order }}
-          </v-btn>
+        <v-card class="pa-4" style="background-color: white; border-radius: 15px; min-height: 280px">
+          <div v-for="order in orders" :key="order.id" class="order-item" draggable="true"
+            @dragstart="() => handleDragStart(order)" @dragover="handleDragOver" @drop="() => handleDrop(order)">
+            {{ order.name }}
+          </div>
         </v-card>
       </v-col>
     </v-row>
   </v-container>
 </template>
+<!-- ส่วน UI ของปุ่ม Order1--2 -->
+<style scoped>
+.order-item {
+  background-color: #2b2e3f;
+  color: white;
+  padding: 7px;
+  margin-bottom: 8px;
+  text-align: center;
+  cursor: move;
+  user-select: none;
+}
+
+.order-item:hover {
+  opacity: 0.9;
+}
+</style>