gitea/checklist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✅ Mejoras Visuales del Drag-and-Drop

Browse Source 
Efectos Visuales Añadidos:
Al iniciar el arrastre:

La pregunta se vuelve semi-transparente (40% opacidad)
Se aplica un ligero zoom out (scale 0.98)
Aparece un borde morado brillante (ring-2 ring-purple-500)
Durante el arrastre sobre una pregunta:

La zona de destino se resalta con fondo morado claro
Borde superior morado grueso (4px)
Sombra pronunciada para destacar la zona
Indicador visual claro: Badge flotante que dice "Se moverá ANTES de esta pregunta" con ícono de cruz
Transiciones suaves:

Todas las transformaciones tienen duration-200 para animaciones fluidas
El elemento arrastrado mantiene su escala reducida durante el movimiento
Al soltar:

Se restauran todos los estilos originales
La pregunta regresa a opacidad 100% y escala normal
This commit is contained in:
ronalds
2025-12-02 15:57:55 -03:00
parent de5f09a351
commit 31f5edae84
3 changed files with 25 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/App.jsx
View File

@@ -1333,11 +1333,16 @@ function QuestionsManagerModal({ checklist, onClose }) {
const handleDragStart = (e, question) => {
setDraggedQuestion(question)
e.dataTransfer.effectAllowed = 'move'
e.currentTarget.style.opacity = '0.5'
// Hacer semi-transparente y añadir borde para feedback visual
e.currentTarget.style.opacity = '0.4'
e.currentTarget.style.transform = 'scale(0.98)'
e.currentTarget.classList.add('ring-2', 'ring-purple-500')
}
const handleDragEnd = (e) => {
e.currentTarget.style.opacity = '1'
e.currentTarget.style.transform = 'scale(1)'
e.currentTarget.classList.remove('ring-2', 'ring-purple-500')
setDraggedQuestion(null)
setDragOverQuestion(null)
@@ -1902,12 +1907,27 @@ function QuestionsManagerModal({ checklist, onClose }) {
onDragOver={(e) => handleDragOver(e, question)}
onDragLeave={handleDragLeave}
onDrop={(e) => handleDrop(e, question)}
className={`p-4 hover:bg-gray-50 flex justify-between items-start cursor-move transition-all ${
className={`p-4 hover:bg-gray-50 flex justify-between items-start cursor-move transition-all duration-200 relative ${
isSubQuestion ? 'bg-blue-50 ml-8 border-l-4 border-blue-300' : ''
} ${
dragOverQuestion?.id === question.id ? 'border-t-4 border-indigo-500' : ''
draggedQuestion?.id === question.id ? 'opacity-40 scale-95' : ''
} ${
dragOverQuestion?.id === question.id
? 'bg-purple-50 border-t-4 border-purple-500 shadow-lg pt-8'
: ''
}`}
>
{/* Indicador visual de zona de drop */}
{dragOverQuestion?.id === question.id && (
<div className="absolute -top-4 left-0 right-0 flex items-center justify-center">
<div className="bg-purple-500 text-white px-4 py-1 rounded-full text-xs font-semibold flex items-center gap-2 shadow-lg">
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clipRule="evenodd" />
</svg>
Se moverá ANTES de esta pregunta
</div>
</div>
)}
<div className="flex-1">
<div className="flex items-start gap-3">
<div className="text-gray-400 text-sm mt-1">#{question.id}</div>