El Atributo ONDRAGLEAVE

El atributo ondragleave es parte de la API de Drag and Drop de HTML5 y se activa cuando un elemento arrastrable abandona los límites de una zona de destino válida. Es esencial para restablecer estilos o estados modificados durante el arrastre, garantizando una experiencia de usuario fluida y coherente.

¿Qué hace ondragleave?

Disparador:

Cuando un elemento arrastrable sale de una zona de destino (drop target) después de haber entrado en ella.

Propósito principal:

• Revertir cambios visuales aplicados al entrar en la zona (ondragenter).

• Limpiar estados temporales o indicadores de interacción.

Relación con otros eventos:

1. ondragenter: Cuando el elemento entra en la zona.

2. ondragover: Mientras el elemento está sobre la zona (requiere e.preventDefault() para permitir el drop).

3. ondragleave: Cuando el elemento sale de la zona.

4. ondrop: Al soltar el elemento en la zona.

Sintaxis básica

Como atributo HTML:

<div 
  id="zonaDestino" 
  ondragenter="resaltarZona()" 
  ondragleave="restaurarZona()"
>
  Suelta aquí
</div>

Con JavaScript (recomendado para mayor control):

const zona = document.getElementById("zonaDestino");

zona.addEventListener("dragenter", () => {
  zona.style.background = "#e3f2fd"; // Resaltar al entrar
});

zona.addEventListener("dragleave", () => {
  zona.style.background = "white"; // Restaurar al salir
});

Ejemplos prácticos

Ejemplo 1: Cambio de estilo básico

<div 
  class="drop-zone" 
  ondragenter="this.style.border = '3px dashed #2196F3'" 
  ondragleave="this.style.border = '2px dashed #ccc'"
  ondragover="event.preventDefault()"
>
  Arrastra archivos aquí
</div>

<style>
  .drop-zone {
    width: 300px;
    height: 200px;
    border: 2px dashed #ccc;
    margin: 20px;
  }
</style>

Ejemplo 2: Sistema de carrito de compras

<div class="item" draggable="true">???? Producto</div>
<div 
  id="carrito" 
  ondragenter="this.classList.add('resaltado')" 
  ondragleave="this.classList.remove('resaltado')"
  ondragover="event.preventDefault()"
>
  Carrito de compras
</div>

<script>
  document.getElementById("carrito").addEventListener("drop", (e) => {
    e.preventDefault();
    e.target.innerHTML += "<div>Producto añadido</div>";
    e.target.classList.remove("resaltado");
  });
</script>

<style>
  .resaltado {
    background: #fff3e0;
    border: 2px solid #ff9800 !important;
  }
</style>

Diferencias entre eventos de arrastre

Evento	Descripción	Momento de activación
ondragenter	Elemento entra en la zona de destino	1 vez al entrar
ondragover	Elemento se mueve dentro de la zona	Continuamente
ondragleave	Elemento sale de la zona	1 vez al salir
ondrop	Elemento se suelta en la zona	Al finalizar el arrastre

Mejores prácticas

Restaurar estados visuales:

Siempre revierte los cambios hechos en ondragenter:

zona.addEventListener("dragleave", () => {
  zona.style.opacity = "1";
});

Manejar jerarquías de elementos:

Si la zona de destino contiene elementos hijos, usa event.relatedTarget para evitar activar ondragleave al moverse entre padres e hijos:

zona.addEventListener("dragleave", (e) => {
  if (!zona.contains(e.relatedTarget)) {
    zona.style.background = "white";
  }
});

Accesibilidad:

Añade mensajes para lectores de pantalla con aria-live:

<div 
  id="zona" 
  aria-live="polite"
  ondragleave="document.getElementById('mensaje').textContent = ''"
>
  <p id="mensaje"></p>
</div>

Casos avanzados

Validación de tipo de archivo:

<div 
  id="dropZone" 
  ondragenter="validarArchivo(event)" 
  ondragleave="limpiarAlerta()"
>
  Arrastra solo imágenes (.png, .jpg)
</div>
<p id="alerta"></p>

<script>
  function validarArchivo(e) {
    const tiposPermitidos = ["image/png", "image/jpeg"];
    const archivo = e.dataTransfer.items[0]?.type;
    
    if (archivo && !tiposPermitidos.includes(archivo)) {
      document.getElementById("alerta").textContent = "Formato no válido";
      e.preventDefault();
    }
  }

  function limpiarAlerta() {
    document.getElementById("alerta").textContent = "";
  }
</script>

Errores comunes

 

<!-- MAL: No prevenir el comportamiento predeterminado en ondragover -->
<div 
  ondragenter="resaltar()" 
  ondragleave="restaurar()"
  <!-- ¡Falta ondragover! -->
></div>

<!-- CONFUSIÓN: Usar ondragleave en elementos no drop targets -->
<span ondragleave="...">Esto no es una zona de destino</span>

<!-- OLVIDAR restaurar estados -->
<div 
  ondragenter="this.style.border = 'red'" 
  <!-- ¡El borde queda rojo para siempre! -->
></div>

Navegador	Soporte	Notas
Chrome	✅ Todas versiones
Firefox	✅ Todas versiones
Safari	✅ v10+
Edge	✅ Todas versiones
Móviles	⚠️ Soporte parcial	Requiere toques largos y manejo de eventos táctiles

Conclusión

El atributo ondragleave es crucial para:

• Mejorar la retroalimentación visual durante operaciones de arrastre.
• Mantener la integridad de la interfaz al revertir cambios.
• Crear experiencias intuitivas en sistemas de arrastre y soltar.

Recuerda:

1. Siempre restaura los estilos aplicados en ondragenter.
2. Combina con ondragover y e.preventDefault() para permitir drops.
3. Prueba en múltiples navegadores para garantizar consistencia.

¡Ahora puedes implementar zonas de destino profesionales y accesibles!