diff --git a/frontend/package.json b/frontend/package.json index 44da8bc..20cabf4 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,7 +1,7 @@ { "name": "checklist-frontend", "private": true, - "version": "1.0.74", + "version": "1.0.75", "type": "module", "scripts": { "dev": "vite", diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 6933f57..586d9e5 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -930,6 +930,8 @@ function QuestionsManagerModal({ checklist, onClose }) { const [loadingAudit, setLoadingAudit] = useState(false) const [draggedQuestion, setDraggedQuestion] = useState(null) const [dragOverQuestion, setDragOverQuestion] = useState(null) + const scrollContainerRef = useRef(null) + const autoScrollIntervalRef = useRef(null) const [formData, setFormData] = useState({ section: '', text: '', @@ -1225,6 +1227,12 @@ function QuestionsManagerModal({ checklist, onClose }) { e.currentTarget.style.opacity = '1' setDraggedQuestion(null) setDragOverQuestion(null) + + // Limpiar auto-scroll + if (autoScrollIntervalRef.current) { + clearInterval(autoScrollIntervalRef.current) + autoScrollIntervalRef.current = null + } } const handleDragOver = (e, question) => { @@ -1250,10 +1258,58 @@ function QuestionsManagerModal({ checklist, onClose }) { e.dataTransfer.dropEffect = 'move' setDragOverQuestion(question) + + // Auto-scroll cuando está cerca de los bordes + if (scrollContainerRef.current) { + const container = scrollContainerRef.current + const rect = container.getBoundingClientRect() + const scrollThreshold = 100 // Pixeles desde el borde para activar scroll + const scrollSpeed = 10 // Velocidad de scroll + + const mouseY = e.clientY + const distanceFromTop = mouseY - rect.top + const distanceFromBottom = rect.bottom - mouseY + + // Limpiar intervalo anterior si existe + if (autoScrollIntervalRef.current) { + clearInterval(autoScrollIntervalRef.current) + autoScrollIntervalRef.current = null + } + + // Scroll hacia arriba + if (distanceFromTop < scrollThreshold && container.scrollTop > 0) { + autoScrollIntervalRef.current = setInterval(() => { + if (container.scrollTop > 0) { + container.scrollTop -= scrollSpeed + } else { + clearInterval(autoScrollIntervalRef.current) + autoScrollIntervalRef.current = null + } + }, 16) // ~60fps + } + // Scroll hacia abajo + else if (distanceFromBottom < scrollThreshold && + container.scrollTop < container.scrollHeight - container.clientHeight) { + autoScrollIntervalRef.current = setInterval(() => { + if (container.scrollTop < container.scrollHeight - container.clientHeight) { + container.scrollTop += scrollSpeed + } else { + clearInterval(autoScrollIntervalRef.current) + autoScrollIntervalRef.current = null + } + }, 16) // ~60fps + } + } } const handleDragLeave = (e) => { setDragOverQuestion(null) + + // Limpiar auto-scroll si sale del área + if (autoScrollIntervalRef.current) { + clearInterval(autoScrollIntervalRef.current) + autoScrollIntervalRef.current = null + } } const handleDrop = async (e, targetQuestion) => {