diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue index ec5cc613b..e0142542f 100644 --- a/src/pages/Travel/ExtraCommunity.vue +++ b/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(); + } +};