แก้ไขทะเบียน ===> fix DragandDrop

src/modules/04_registryPerson/views/edit/components/DialogSort.vue

@@ -40,14 +40,14 @@ const profileId = ref<string>(route.params.id.toString()); //id profile
 /** ข้อมูล Table*/
 const rowsData = ref<DataPosition[]>([]);
 
-/**
- * fiunction จัดลำดับ
- * @param from ตำแหน่งปัจุบัน
- * @param to ตำแหน่งที่จะย้ายไป
- */
-function onDrop(from: number, to: number) {
-  rowsData.value.splice(to - 1, 0, rowsData.value.splice(from - 1, 1)[0]);
-}
+// /**
+//  * fiunction จัดลำดับ
+//  * @param from ตำแหน่งปัจุบัน
+//  * @param to ตำแหน่งที่จะย้ายไป
+//  */
+// function onDrop(from: number, to: number) {
+//   rowsData.value.splice(to - 1, 0, rowsData.value.splice(from - 1, 1)[0]);
+// }
 
 /** function บันทึกการจัดลำดับ*/
 function onSubmit() {
@@ -72,6 +72,62 @@ function onSubmit() {
   });
 }
 
+let draggedIndex = -1; // index ของ item ที่ถูก drag
+const cardSectionRef = ref<HTMLElement | null>(null); // ref สำหรับ container ที่จะ scroll
+
+/**
+ *  ฟังก์ชันนี้ใช้สำหรับการ drag item
+ * @param index index ของ item ที่ถูก drag
+ */
+function onDragStart(index: number) {
+  //จะทำการ set draggedIndex เป็น index ที่ถูก drag
+  draggedIndex = index;
+}
+
+/**
+ * ฟังก์ชันนี้ใช้สำหรับการ drop item
+ * @param targetIndex index ที่จะ drop
+ */
+function onDrop(targetIndex: number) {
+  // ถ้า draggedIndex เป็น -1 หรือ draggedIndex เท่ากับ targetIndex จะไม่ทำอะไร
+  if (draggedIndex === -1 || draggedIndex === targetIndex) return;
+  // ถ้า draggedIndex ไม่เท่ากับ targetIndex จะทำการย้าย item
+  const item = rowsData.value.splice(draggedIndex, 1)[0];
+  rowsData.value.splice(targetIndex, 0, item);
+  draggedIndex = -1;
+}
+
+/**
+ *  ฟังก์ชันนี้ใช้สำหรับการเลื่อน scroll ของ container
+ * @param e DragEvent
+ * @description ทำให้ scroll container ได้เวลา drag อยู่ใกล้ขอบ
+ */
+function onDragOver(e: DragEvent) {
+  let container = cardSectionRef.value;
+  // ถ้าเป็น vue proxy ให้ใช้ container.$el
+  if (container && (container as any).$el) {
+    container = (container as any).$el;
+  }
+  // ถ้า container ไม่ใช่ HTMLElement ให้แสดง warning
+  if (
+    !container ||
+    typeof (container as HTMLElement).getBoundingClientRect !== "function"
+  ) {
+    console.warn("container is not HTMLElement:", container);
+    return;
+  }
+  const rect = (container as HTMLElement).getBoundingClientRect();
+  const offset = 40; // ระยะห่างจากขอบที่ต้องการให้ scroll
+  const scrollSpeed = 30; // ความเร็วในการ scroll
+
+  // ถ้า mouse อยู่ใกล้ขอบบนหรือขอบล่างของ container ให้ scroll
+  if (e.clientY < rect.top + offset) {
+    (container as HTMLElement).scrollTop -= scrollSpeed;
+  } else if (e.clientY > rect.bottom - offset) {
+    (container as HTMLElement).scrollTop += scrollSpeed;
+  }
+}
+
 watch(modal, async () => {
   if (modal.value && props.dataSort) {
     const dataList = props.dataSort;
@@ -82,82 +138,77 @@ watch(modal, async () => {
 });
 </script>
 <template>
-  <template>
-    <q-dialog v-model="modal" persistent full-width>
-      <q-card style="min-width: 80vw">
-        <DialogHeader :tittle="`จัดลำดับการ`" :close="() => (modal = false)" />
-        <q-separator />
-        <q-card-section style="max-height: 70vh" class="scroll">
-          <q-table
-            class="custom-header-table"
-            v-if="rowsData.length > 0"
-            v-draggable-table="{
-              options: {
-                mode: 'row',
-                onlyBody: true,
-                dragHandler: 'td',
-              },
-              onDrop,
-            }"
-            flat
-            bordered
-            :rows="rowsData"
-            :columns="columns"
-            :rows-per-page-options="[0]"
-            row-key="id"
-            hide-bottom
-            hide-pagination
-          >
-            <template v-slot:body="props">
-              <q-tr :props="props">
-                <q-td v-for="col in props.cols" :key="col.id">
-                  <div v-if="col.name === 'no'">
-                    {{ props.rowIndex + 1 }}
-                  </div>
-                  <div
-                    v-else-if="col.name === 'organization'"
-                    class="text-html"
-                  >
-                    {{
-                      findOrgNameHtml({
-                        root: props.row.orgRoot,
-                        child1: props.row.orgChild1,
-                        child2: props.row.orgChild2,
-                        child3: props.row.orgChild3,
-                        child4: props.row.orgChild4,
-                      })
-                    }}
-                  </div>
-
-                  <div v-else-if="col.name === 'commandCode'">
-                    {{ col.value ? col.value : "-" }}
-                  </div>
-                  <div v-else>
-                    {{ col.value ? col.value : "-" }}
-                  </div>
-                </q-td>
-              </q-tr>
-            </template>
-          </q-table>
-          <div v-else class="bg-grey-1 text-center q-pa-md">ไม่มีข้อมูล</div>
-        </q-card-section>
-
-        <q-separator />
-
-        <q-card-actions align="right">
-          <q-btn
-            :disable="rowsData.length === 0"
-            type="submit"
-            :label="`บันทึก`"
-            color="public"
-            @click="onSubmit"
-          >
-            <q-tooltip>บันทึก</q-tooltip>
-          </q-btn>
-        </q-card-actions>
-      </q-card>
-    </q-dialog>
-  </template>
+  <q-dialog v-model="modal" persistent full-width>
+    <q-card style="min-width: 80vw">
+      <DialogHeader :tittle="`จัดลำดับการ`" :close="() => (modal = false)" />
+      <q-separator />
+      <q-card-section
+        ref="cardSectionRef"
+        style="max-height: 70vh; overflow-y: auto"
+        @dragover.prevent="onDragOver"
+      >
+        <q-table
+          class="custom-header-table"
+          v-if="rowsData.length > 0"
+          flat
+          bordered
+          :rows="rowsData"
+          :columns="columns"
+          :rows-per-page-options="[0]"
+          row-key="id"
+          hide-bottom
+          hide-pagination
+        >
+          <template v-slot:body="props">
+            <q-tr
+              :props="props"
+              draggable="true"
+              @dragstart="onDragStart(props.rowIndex)"
+              @drop="onDrop(props.rowIndex)"
+              @dragover.prevent.stop="onDragOver"
+              style="cursor: move"
+            >
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div v-if="col.name === 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <div v-else-if="col.name === 'organization'" class="text-html">
+                  {{
+                    findOrgNameHtml({
+                      root: props.row.orgRoot,
+                      child1: props.row.orgChild1,
+                      child2: props.row.orgChild2,
+                      child3: props.row.orgChild3,
+                      child4: props.row.orgChild4,
+                    })
+                  }}
+                </div>
+                <div v-else-if="col.name === 'commandCode'">
+                  {{ col.value ? col.value : "-" }}
+                </div>
+                <div v-else>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </q-table>
+        <div v-else class="bg-grey-1 text-center q-pa-md">ไม่มีข้อมูล</div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn
+          :disable="rowsData.length === 0"
+          type="submit"
+          :label="`บันทึก`"
+          color="public"
+          @click="onSubmit"
+        >
+          <q-tooltip>บันทึก</q-tooltip>
+        </q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style lang="scss"></style>