Add scroll when dragging elements

src/pages/Travel/ExtraCommunity.vue

@@ -298,10 +298,6 @@ const handleDragEnter = (_, targetIndex) => {
     targetRowIndex.value = targetIndex;
 };
 
-const handleDragOver = (e) => {
-    e.preventDefault();
-};
-
 const saveRowDrop = async (targetRowIndex) => {
     const entryId = draggedEntry.value.id;
     const travelId = rows.value[targetRowIndex].id;
@@ -334,6 +330,7 @@ const handleDrop = () => {
     )
         return;
     moveRow(draggedRowIndex.value, targetRowIndex.value, entryRowIndex.value);
+    stopScroll();
     cleanDragAndDropData();
 };
 
@@ -343,6 +340,53 @@ const cleanDragAndDropData = () => {
     entryRowIndex.value = null;
     draggedEntry.value = null;
 };
+
+const scrollInterval = ref(null);
+
+const startScroll = (direction) => {
+    if (!scrollInterval.value) {
+        scrollInterval.value = requestAnimationFrame(() => scroll(direction));
+    }
+};
+
+const stopScroll = () => {
+    if (scrollInterval.value) {
+        cancelAnimationFrame(scrollInterval.value);
+        scrollInterval.value = null;
+    }
+};
+
+const scroll = (direction) => {
+    const yOffset = direction === 'up' ? -2 : 2; // Ajusta la velocidad del scroll
+    window.scrollBy(0, yOffset);
+
+    const windowHeight = window.innerHeight;
+    const documentHeight = document.body.offsetHeight;
+
+    if (
+        (direction === 'up' && window.scrollY > 0) ||
+        (direction === 'down' && windowHeight + window.scrollY < documentHeight)
+    ) {
+        scrollInterval.value = requestAnimationFrame(() => scroll(direction));
+    } else {
+        stopScroll();
+    }
+};
+
+const handleDrag = (event) => {
+    const y = event.clientY;
+    const windowHeight = window.innerHeight;
+    const nearTop = y < 150;
+    const nearBottom = y > windowHeight - 100;
+
+    if (nearTop) {
+        startScroll('up');
+    } else if (nearBottom) {
+        startScroll('down');
+    } else {
+        stopScroll();
+    }
+};
 </script>
 
 <template>
@@ -383,7 +427,8 @@ const cleanDragAndDropData = () => {
             :pagination="{ rowsPerPage: 0 }"
             class="full-width"
             table-style="user-select: none;"
-            @dragend="cleanDragAndDropData()"
+            @drag="handleDrag($event)"
+            @dragend="handleDrop($event)"
             :separator="!targetRowIndex && targetRowIndex !== 0 ? 'horizontal' : 'none'"
         >
             <template #body="props">
@@ -392,7 +437,7 @@ const cleanDragAndDropData = () => {
                     class="cursor-pointer bg-vn-primary-row"
                     @click="navigateToTravelId(props.row.id)"
                     @dragenter="handleDragEnter($event, props.rowIndex)"
-                    @dragover="handleDragOver($event)"
+                    @dragover.prevent
                     @drop="handleDrop()"
                     :class="{
                         'dashed-border --top --left --right':
@@ -455,7 +500,7 @@ const cleanDragAndDropData = () => {
                     class="bg-vn-secondary-row cursor-pointer"
                     @dragstart="handleDragStart($event, props.rowIndex, index)"
                     @dragenter="handleDragEnter($event, props.rowIndex)"
-                    @dragover="handleDragOver($event)"
+                    @dragover.prevent
                     @drop="handleDrop()"
                     :draggable="true"
                     :class="{