Respuesta visual durante el arrastre
Aplique estilos a los elementos durante las operaciones de arrastre.
Respuesta visual durante el arrastre es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
Por qué son importantes los comentarios visuales
Una buena interacción de arrastrar y soltar indica al usuario qué está sucediendo: qué elemento se está moviendo, dónde puede colocarlo y si el drop es válido. Sin comentarios, la interacción parece defectuosa.
Aplicar estilos al elemento arrastrado
Reduzca la opacidad o escale el origen en dragstart para que el usuario vea qué elemento ha seleccionado.
item.addEventListener("dragstart", () => item.classList.add("is-dragging"));
item.addEventListener("dragend", () => item.classList.remove("is-dragging"));El evento dragenter
dragenter se dispara cuando el elemento arrastrado entra en un posible destino. Utilícelo para resaltar la zona.
zone.addEventListener("dragenter", (e) => {
e.preventDefault();
zone.classList.add("drag-over");
});El evento dragleave
dragleave se dispara cuando el elemento sale del destino. Quite aquí el resaltado.
zone.addEventListener("dragleave", () => {
zone.classList.remove("drag-over");
});El problema del parpadeo
dragenter/dragleave también se disparan para los elementos secundarios, lo que provoca parpadeos. Un contador o una comprobación de relatedTarget mantiene estable el resaltado.
let depth = 0;
zone.addEventListener("dragenter", () => { depth++; zone.classList.add("drag-over"); });
zone.addEventListener("dragleave", () => { depth--; if (depth === 0) zone.classList.remove("drag-over"); });Restablecer al soltar
Limpie siempre el estado de resaltado en el controlador de drop, ya que dragleave puede no dispararse cuando el drop se completa correctamente.
zone.addEventListener("drop", (e) => {
e.preventDefault();
depth = 0;
zone.classList.remove("drag-over");
});Personalizar la imagen de arrastre
setDragImage(element, offsetX, offsetY) en dragstart sustituye la imagen fantasma predeterminada por cualquier elemento.
item.addEventListener("dragstart", (e) => {
const ghost = document.getElementById("custom-ghost");
e.dataTransfer.setDragImage(ghost, 20, 20);
});Controlar el cursor con dropEffect
El cursor (signo más para copiar, flecha para mover, símbolo de operación no permitida) depende de dropEffect, que se establece en dragover. Rechace los drops no válidos con "none".
zone.addEventListener("dragover", (e) => {
e.preventDefault();
e.dataTransfer.dropEffect = canAccept ? "move" : "none";
});Mostrar un marcador de posición para el drop
En las listas ordenables, inserte un elemento marcador de posición en la posición de drop prevista para que los usuarios vean exactamente dónde se colocará el elemento.
function showPlaceholder(beforeEl) {
list.insertBefore(placeholder, beforeEl);
}Calcular la posición de inserción
Compare la coordenada Y del puntero con el punto medio vertical de cada elemento para decidir si debe colocarlo antes o después.
function getAfterElement(container, y) {
const items = [...container.querySelectorAll(".item:not(.is-dragging)")];
return items.find((el) => {
const box = el.getBoundingClientRect();
return y < box.top + box.height / 2;
});
}Comentarios accesibles
Las señales visuales por sí solas excluyen a los usuarios de teclado y de lectores de pantalla. Combine arrastrar y soltar con anuncios ARIA live y una alternativa de teclado para garantizar la accesibilidad.
Comprobación rápida
Pruebe los comentarios visuales.
Repaso: comentarios visuales
Aplicó estilos al elemento arrastrado, resaltó las zonas con dragenter/dragleave, resolvió el parpadeo con un contador de profundidad, personalizó la imagen de arrastre, controló el cursor mediante dropEffect y mostró marcadores de posición para el drop. A continuación: arrastrar archivos.
Preguntas frecuentes
¿La lección «Respuesta visual durante el arrastre» es gratis?
Sí — el texto completo de «Respuesta visual durante el arrastre» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Respuesta visual durante el arrastre»?
Aplique estilos a los elementos durante las operaciones de arrastre. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Respuesta visual durante el arrastre»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Cómo hacer que los elementos se puedan arrastrar
- Destinos de soltado y dataTransfer
- Respuesta visual durante el arrastre
- Arrastre de archivos a la página