El Atributo ONDRAGOVER

El atributo ondragover es parte de la API de Drag and Drop de HTML5 y se activa mientras un elemento arrastrable está sobre una zona de destino válida. Es fundamental para permitir operaciones de "soltar" (drop) y proporcionar retroalimentación visual durante el arrastre.

¿Qué hace ondragover?

• Disparador: Se ejecuta continuamente mientras un elemento arrastrado está sobre una zona de destino.

• Propósito principal:

  • Permitir que la zona acepte elementos arrastrados mediante e.preventDefault().

  • Actualizar la interfaz en tiempo real (ej: efectos visuales).

• Relación con otros eventos:

  • ondragenter: Al entrar en la zona (una vez).

  • ondragover: Durante el movimiento sobre la zona (varias veces por segundo).

  • ondragleave: Al salir de la zona.

  • ondrop: Al soltar el elemento.

Sintaxis básica

Como atributo HTML:

<div 
  id="zona" 
  ondragover="manejarArrastre(event)"
>
  Zona de destino
</div>

Con JavaScript (recomendado):

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

zona.addEventListener("dragover", (e) => {
  e.preventDefault(); // ¡Obligatorio para permitir el drop!
});

Ejemplos prácticos

Ejemplo 1: Permitir drop básico

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

<div 
  id="contenedor" 
  style="width: 300px; height: 200px; border: 2px dashed #ccc;"
>
  Suelta aquí
</div>

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

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

  // Manejar elemento soltado
  contenedor.addEventListener("drop", (e) => {
    e.preventDefault();
    const elemento = document.querySelector(".item");
    e.target.appendChild(elemento);
  });
</script>

Ejemplo 2: Efecto de resaltado dinámico

<style>
  .resaltado {
    background: #e3f2fd;
    transform: scale(1.02);
  }
</style>

<div 
  id="dropZone" 
  ondragover="event.preventDefault(); this.classList.add('resaltado')"
  ondragleave="this.classList.remove('resaltado')"
  ondrop="manejarDrop(event)"
>
  Arrastra archivos aquí
</div>

Ejemplo 3: Sistema de subida de archivos

<div id="dropArea">???? Arrastra archivos aquí</div>
<ul id="listaArchivos"></ul>

<script>
  const dropArea = document.getElementById("dropArea");

  dropArea.addEventListener("dragover", (e) => {
    e.preventDefault();
    dropArea.style.background = "#f0f4ff";
  });

  dropArea.addEventListener("drop", (e) => {
    e.preventDefault();
    dropArea.style.background = "white";
    
    const archivos = e.dataTransfer.files;
    const lista = document.getElementById("listaArchivos");
    
    for (const archivo of archivos) {
      const li = document.createElement("li");
      li.textContent = `${archivo.name} (${(archivo.size/1024).toFixed(2)} KB)`;
      lista.appendChild(li);
    }
  });
</script>

Propiedades clave del evento

Accede a información útil desde el objeto event:

• clientX / clientY: Posición actual del cursor.

• dataTransfer: Datos del elemento arrastrado (definidos en ondragstart).

• target: Elemento sobre el que se está arrastrando.

Diferencias entre eventos clave

Evento	Frecuencia	Uso principal
ondragenter	Una vez	Iniciar efectos visuales
ondragover	Continuamente	Permitir drop + actualizaciones
ondragleave	Una vez	Limpiar efectos visuales

Mejores prácticas

Siempre usar e.preventDefault():

Es obligatorio para permitir el evento drop:

zona.addEventListener("dragover", (e) => {
  e.preventDefault(); // ¡Sin esto, el drop no funcionará!
});

Optimizar el rendimiento:

Evita operaciones pesadas dentro de ondragover, ya que se ejecuta muchas veces por segundo:

let ultimaPosicion = null;
zona.addEventListener("dragover", (e) => {
  if (ultimaPosicion !== `${e.clientX},${e.clientY}`) {
    // Actualizar solo si la posición cambió
    ultimaPosicion = `${e.clientX},${e.clientY}`;
    animarElemento(e.clientX, e.clientY);
  }
});

Accesibilidad:

<div role="region" aria-dropzone="move">...</div>

Proporciona alternativas para usuarios que no usen arrastre (ej: botones de subida).

Casos avanzados

Juego de rompecabezas con arrastre:

<div class="pieza" draggable="true" data-posicion="correcta">????</div>
<div id="tablero"></div>

<script>
  const tablero = document.getElementById("tablero");

  tablero.addEventListener("dragover", (e) => {
    e.preventDefault();
    e.target.style.border = "2px solid #4CAF50";
  });

  tablero.addEventListener("drop", (e) => {
    e.preventDefault();
    const pieza = document.querySelector(".pieza");
    if (e.target === tablero && pieza.dataset.posicion === "correcta") {
      tablero.appendChild(pieza);
      pieza.draggable = false; // Bloquear después de colocar
    }
  });
</script>

Editor de diagramas con arrastre:

<div class="nodo" draggable="true">???? Nodo 1</div>
<svg id="lienzo" width="500" height="300"></svg>

<script>
  const lienzo = document.getElementById("lienzo");

  lienzo.addEventListener("dragover", (e) => {
    e.preventDefault();
    lienzo.style.backgroundColor = "#f5f5f5";
  });

  lienzo.addEventListener("drop", (e) => {
    e.preventDefault();
    const nodo = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    nodo.setAttribute("cx", e.clientX);
    nodo.setAttribute("cy", e.clientY);
    nodo.setAttribute("r", "20");
    lienzo.appendChild(nodo);
  });
</script>

Errores comunes

<!-- MAL: Olvidar e.preventDefault() -->
<div ondragover="console.log('Arrastrando')"></div> <!-- Drop no funcionará -->

<!-- CONFUSIÓN: Usar ondragover en elementos no drop targets -->
<span ondragover="...">No es una zona válida</span>

<!-- EFECTOS VISUALES PESADOS -->
<script>
  zona.addEventListener("dragover", (e) => {
    // ¡Esto se ejecuta cientos de veces!
    generarAnimacionCompleja(); 
  });
</script>

Compatibilidad

Navegador	Soporte	Notas
Chrome	✅ Todas versiones
Firefox	✅ Todas versiones
Safari	✅ v10+
Edge	✅ Todas versiones
Móviles	⚠️ Soporte parcial	Requiere polyfills para touch

Conclusión

El atributo ondragover es esencial para:

• Habilitar operaciones de arrastre y soltar.
• Crear interfaces dinámicas con retroalimentación en tiempo real.
• Implementar sistemas complejos como editores gráficos o gestores de archivos.

Recuerda:

1. Siempre usa e.preventDefault() en ondragover.
2. Combínalo con otros eventos (ondragenter, ondragleave) para una experiencia completa.
3. Optimiza el rendimiento evitando cálculos pesados en el evento.

¡Ahora puedes crear zonas de destino interactivas y altamente responsivas!