El Atributo ONDRAG

Es parte de la API de Drag and Drop de HTML5 y se activa continuamente mientras un elemento se está arrastrando.

El atributo ondrag es parte de la API de Drag and Drop de HTML5 y se activa continuamente mientras un elemento se está arrastrando. Es útil para crear efectos visuales dinámicos, actualizar datos en tiempo real o realizar validaciones durante una operación de arrastre.

¿Cómo funciona?

Disparador:

Se ejecuta repetidamente mientras el usuario mantiene presionado y mueve un elemento.

Requisitos:

  • El elemento debe tener draggable="true".

  • Se recomienda manejar eventos complementarios (ondragstart, ondragend).

Ciclo de vida del arrastre:

  1. ondragstart: Al iniciar el arrastre.

  2. ondrag: Durante todo el movimiento.

  3. ondragend: Al soltar el elemento.

Elementos compatibles

Funciona en cualquier elemento HTML con draggable="true":

  • <div>, <span>, <img>, etc.

  • Elementos personalizados con estilos de arrastre.

Sintaxis básica

Como atributo HTML:

<div 
  draggable="true" 
  ondrag="manejarArrastre(event)"
>
  Arrástrame
</div>

Con JavaScript (recomendado para mayor control):

const elemento = document.getElementById('miElemento');
elemento.addEventListener('drag', (e) => {
  // Acciones durante el arrastre
});

Ejemplos prácticos

Ejemplo 1: Cambiar estilo durante el arrastre

<div 
  id="caja" 
  draggable="true" 
  style="width: 100px; height: 100px; background: tomato;"
></div>

<script>
  document.getElementById('caja').addEventListener('drag', (e) => {
    e.target.style.opacity = '0.5';
    e.target.style.cursor = 'grabbing';
  });

  // Restaurar estilo al finalizar
  document.getElementById('caja').addEventListener('dragend', (e) => {
    e.target.style.opacity = '1';
    e.target.style.cursor = 'grab';
  });
</script>

Ejemplo 2: Mostrar coordenadas en tiempo real

<div 
  draggable="true" 
  style="padding: 20px; border: 1px solid black;"
  ondrag="actualizarCoordenadas(event)"
>
  Arrástrame para ver coordenadas
</div>
<p id="coordenadas">Posición: (0, 0)</p>

<script>
  function actualizarCoordenadas(e) {
    const x = e.clientX;
    const y = e.clientY;
    document.getElementById('coordenadas').textContent = 
      `Posición: (${x}, ${y})`;
  }
</script>

Propiedades clave del evento ondrag

Accede a datos útiles desde el objeto event:

  • clientX / clientY: Coordenadas del cursor respecto a la ventana.

  • dataTransfer: Objeto para almacenar datos durante el arrastre (se configura en ondragstart).

  • target: Elemento que se está arrastrando.

Diferencias clave entre eventos de arrastre

Evento Descripción
ondragstart Al iniciar el arrastre (configuración inicial).
ondrag Durante todo el movimiento (actualizaciones).
ondragend Al soltar el elemento (limpieza final).

Mejores prácticas

Configurar datos en ondragstart:

elemento.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', e.target.id); // Almacenar ID del elemento
});

Mantener ondrag ligero:

Evita operaciones pesadas que afecten el rendimiento:

elemento.addEventListener('drag', (e) => {
  // Actualizaciones simples (estilos, coordenadas)
});

Manejar zonas de destino:

Para permitir que un elemento sea soltado:

const zonaDestino = document.getElementById('zona');
zonaDestino.addEventListener('dragover', (e) => {
  e.preventDefault(); // Permite soltar
});

zonaDestino.addEventListener('drop', (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  const elemento = document.getElementById(id);
  zonaDestino.appendChild(elemento);
});

Casos avanzados

Sistema de inventario tipo "drag and drop":

<div class="item" draggable="true" data-item="poción">Poción</div>
<div class="inventario">Arrastra los objetos aquí</div>

<script>
  document.querySelectorAll('.item').forEach(item => {
    item.addEventListener('dragstart', (e) => {
      e.dataTransfer.setData('text/plain', e.target.dataset.item);
    });
  });

  document.querySelector('.inventario').addEventListener('drop', (e) => {
    e.preventDefault();
    const item = e.dataTransfer.getData('text/plain');
    e.target.innerHTML += `<div>${item}</div>`;
  });
</script>

Validación durante el arrastre:

<div 
  draggable="true" 
  ondrag="validarZona(event)"
  style="background: lightgreen; padding: 20px;"
>
  Arrástrame sobre la zona roja
</div>
<div id="zonaNoPermitida" style="background: salmon; height: 200px;"></div>

<script>
  function validarZona(e) {
    const zona = document.elementFromPoint(e.clientX, e.clientY);
    if (zona.id === 'zonaNoPermitida') {
      e.target.style.background = 'red';
    } else {
      e.target.style.background = 'lightgreen';
    }
  }
</script>

Errores comunes

<!-- MAL: Olvidar draggable="true" -->
<div ondrag="...">No se puede arrastrar</div>

<!-- CONFUSIÓN: Usar ondrag sin ondragstart para datos -->
<div draggable="true" ondrag="..."></div> <!-- dataTransfer estará vacío -->

<!-- BLOQUEAR SIN FEEDBACK -->
<script>
  elemento.addEventListener('dragover', (e) => {
    // ¡Falta e.preventDefault() para permitir drop!
  });
</script>

Compatibilidad

Navegador Soporte Notas
Chrome ✅ Todas versiones  
Firefox ✅ Todas versiones  
Safari ✅ Sí (v. 10+)  
Edge ✅ Sí  
Móviles ⚠️ Limitado Requiere polyfills para touch

Conclusión

El atributo ondrag es esencial para:

  • Crear interacciones dinámicas durante operaciones de arrastre.
  • Actualizar interfaces en tiempo real.
  • Validar acciones mientras el usuario mueve elementos.

Recuerda:

  1. Configura draggable="true" en los elementos arrastrables.
  2. Combina con ondragstart y ondragend para un flujo completo.
  3. Prueba en dispositivos táctiles y considera alternativas para móviles.

¡Ahora puedes implementar sistemas de arrastre profesionales y altamente interactivos!