El Atributo ONDRAGENTER

El atributo ondragenter es parte de la API de Drag and Drop de HTML5 y se activa cuando un elemento arrastrable entra en los límites de una zona de destino válida. Es esencial para proporcionar retroalimentación visual al usuario durante operaciones de arrastre, como resaltar áreas donde se puede soltar un elemento.

¿Qué hace ondragenter?

Disparador:

Cuando un elemento arrastrable entra en una zona de destino (drop target).

Uso principal:

• Indicar visualmente que un elemento puede soltarse en la zona.

• Preparar la zona para aceptar datos.

Ciclo de eventos clave:

1. ondragstart: Inicia el arrastre.

2. ondragenter: Elemento entra en la zona de destino.

3. ondragover: Elemento se mueve sobre la zona (requiere e.preventDefault() para permitir el drop).

4. ondragleave: Elemento sale de la zona.

5. ondrop: Elemento se suelta en la zona.

Requisitos básicos

• Elemento arrastrable: Debe tener draggable="true".

• Zona de destino: Debe manejar ondragover con e.preventDefault() para aceptar drops.

Sintaxis básica

Como atributo HTML:

<div 
  id="zonaDestino" 
  ondragenter="resaltarZona(event)"
  ondragover="event.preventDefault()"
>
  Suelta aquí
</div>

Con JavaScript (recomendado):

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

zona.addEventListener('dragenter', (e) => {
  e.target.style.border = '3px dashed #4CAF50';
});

Ejemplos prácticos

Ejemplo 1: Resaltar zona al entrar

<div class="item" draggable="true">???? Arrástrame</div>

<div 
  id="contenedor" 
  style="width: 300px; height: 200px; border: 2px solid #ccc;"
>
  Zona de destino
</div>

<script>
  const contenedor = document.getElementById('contenedor');

  contenedor.addEventListener('dragenter', (e) => {
    e.target.style.background = '#e8f5e9';
    e.target.style.border = '2px solid #4CAF50';
  });

  contenedor.addEventListener('dragleave', (e) => {
    e.target.style.background = 'white';
    e.target.style.border = '2px solid #ccc';
  });

  contenedor.addEventListener('dragover', (e) => {
    e.preventDefault(); // ¡Necesario para permitir el drop!
  });
</script>

Ejemplo 2: Sistema de subida de archivos

<div id="dropZone" style="border: 2px dashed; padding: 20px;">
  Arrastra archivos aquí
</div>

<script>
  const dropZone = document.getElementById('dropZone');

  // Resaltar al entrar
  dropZone.addEventListener('dragenter', (e) => {
    e.target.style.background = '#f0f0f0';
  });

  // Restaurar al salir
  dropZone.addEventListener('dragleave', (e) => {
    e.target.style.background = 'white';
  });

  // Permitir drop
  dropZone.addEventListener('dragover', (e) => {
    e.preventDefault();
  });

  // Manejar archivos soltados
  dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    const archivos = e.dataTransfer.files;
    console.log('Archivos subidos:', archivos);
    e.target.style.background = 'white';
  });
</script>

Diferencias clave entre eventos

Evento	Descripción
ondragenter	Al entrar en la zona de destino (1 vez)
ondragover	Mientras está sobre la zona (continuamente)
ondragleave	Al salir de la zona de destino

Mejores prácticas

Proporcionar retroalimentación visual clara:

zona.addEventListener('dragenter', (e) => {
  e.target.classList.add('resaltado');
});

Restaurar el estado original en ondragleave:

zona.addEventListener('dragleave', (e) => {
  e.target.classList.remove('resaltado');
});

Accesibilidad:

Usar ARIA roles para indicar zonas interactivas:

<div role="region" aria-label="Zona de destino">...</div>

Asegurar compatibilidad con navegación por teclado.

Casos avanzados

Juego de clasificación de elementos:

<div class="categoria" data-categoria="frutas">
  ???? Frutas
  <div class="item" draggable="true" data-tipo="fruta">????</div>
</div>

<div class="categoria" data-categoria="verduras">
  ???? Verduras
</div>

<script>
  document.querySelectorAll('.categoria').forEach(zona => {
    zona.addEventListener('dragenter', (e) => {
      if (e.target.classList.contains('categoria')) {
        e.target.style.opacity = '0.7';
      }
    });

    zona.addEventListener('dragleave', (e) => {
      if (e.target.classList.contains('categoria')) {
        e.target.style.opacity = '1';
      }
    });

    zona.addEventListener('drop', (e) => {
      e.preventDefault();
      const tipo = e.dataTransfer.getData('text/plain');
      if (zona.dataset.categoria === 'frutas' && tipo === 'fruta') {
        e.target.appendChild(document.querySelector('[data-tipo="fruta"]'));
      }
    });
  });
</script>

Errores comunes

<!-- MAL: No usar draggable="true" -->
<div>Arrastra esto</div> <!-- No es arrastrable -->

<!-- CONFUSIÓN: Olvidar e.preventDefault() en ondragover -->
<div 
  ondragenter="resaltar()" 
  ondragover="// ¡Falta prevenir el comportamiento predeterminado!"
></div>

<!-- SIN MANEJAR ondragleave -->
<div ondragenter="resaltar()"></div> <!-- El estilo queda activo para siempre -->

Compatibilidad

Navegador	Soporte
Chrome	✅ Todas versiones
Firefox	✅ Todas versiones
Safari	✅ v10+
Edge	✅ Todas versiones
Móviles	⚠️ Soporte parcial

Conclusión

El atributo ondragenter es clave para:

• Mejorar la experiencia de usuario durante operaciones de arrastre.
• Crear interfaces intuitivas con retroalimentación visual.
• Implementar sistemas complejos como subida de archivos o juegos.

Recuerda:

1. Siempre usa e.preventDefault() en ondragover.
2. Combina ondragenter con ondragleave para restablecer estilos.
3. Prueba en múltiples navegadores y dispositivos.

¡Ahora puedes crear zonas de destino interactivas y profesionales!