ondragEvento

Ejemplo

Ejecuta JavaScript cuando el elemento <p> comienza a arrastrarse:

<p draggable="true" ondrag="myFunction(event)">¡Arrástrame!</p>

La parte inferior de este artículo contiene más ejemplos.

Definición y uso

El evento ondrag se dispara cuando un elemento o texto seleccionado está siendo arrastrado.

Arrastrar y soltar es una funcionalidad muy común en HTML5. Puedes ver más información en nuestro tutorial de HTML:HTML5 arrastrar y soltar。

Nota:Para que un elemento sea arrastrable, es necesario usar el atributodraggableHTML5.

Consejo:Los enlaces y las imágenes son arrastrables por defecto, no necesitan el atributo draggable.

Durante el proceso de arrastrar y soltar se disparan los siguientes eventos:

Eventos que se disparan en el objetivo de arrastre(elemento de origen):
- ondragstart- Se dispara cuando el usuario comienza a arrastrar el elemento
- ondrag - Se dispara mientras el elemento se está arrastrando
- ondragend- Se dispara después de que el usuario termina de arrastrar el elemento

Eventos que se disparan en el objetivo de soltar:
- ondragenter- Este evento se dispara cuando el objeto arrastrado con el ratón entra en el área de su contenedor
- ondragover- Este evento se dispara cuando un objeto arrastrado se mueve dentro del área del contenedor de otro objeto
- ondragleave- Este evento se dispara cuando el objeto arrastrado con el ratón sale del área de su contenedor
- ondrop- Este evento se dispara cuando se suelta el botón del ratón durante un arrastre

Nota:Mientras se arrastra un elemento, el evento ondrag se dispara cada 350 milisegundos.

Soporte del navegador

Los números de la tabla indican la versión del navegador que soporta por primera vez este evento.

Evento
ondrag	4.0	9.0	3.5	6.0	12.0

Sintaxis

En HTML:

<element ondrag="myScript">Pruébalo

En JavaScript:

object.ondrag=function(){myScript};Pruébalo

En JavaScript, usando el método addEventListener():

object.addEventListener("drag", myScript);Pruébalo

Nota:Internet Explorer 8 y versiones anteriores de IE no soportanaddEventListener()el método.

Detalles técnicos

¿Admite burbujeo?:	Yes
¿Se puede cancelar?:	Yes
Tipo de evento:	DragEvent
Etiquetas HTML compatibles:	All HTML elements

Más ejemplos

Ejemplo

El siguiente ejemplo demuestra todos los eventos de arrastrar y soltar:

/* Se dispara al arrastrar */
document.addEventListener("dragstart", function(event) {
// el método dataTransfer.setData() establece el tipo de dato y los datos arrastrados
    event.dataTransfer.setData("Text", event.target.id);
// Genera algo de texto al arrastrar el elemento p
document.getElementById("demo").innerHTML = "Comenzando a arrastrar el elemento p.";
// Cambia la opacidad del elemento arrastrado
    event.target.style.opacity = "0.4";
});
// Cambia el color del texto de salida mientras se arrastra el elemento p
document.addEventListener("drag", function(event) {
    document.getElementById("demo").style.color = "red";
});
// Al terminar de arrastrar el elemento p, genera algo de texto y restablece la opacidad
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Arrastre del elemento p completado";
    event.target.style.opacity = "1";
});
/* Se dispara al completar el arrastre */
// Cuando el elemento p entra en el droptarget después del arrastre, cambia el estilo del borde del div
document.addEventListener("dragenter", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "3px dotted red";
    }
});
// Por defecto, los datos/elementos no pueden ser soltados en otros elementos. Para drop, debemos prevenir el manejo predeterminado del elemento
document.addEventListener("dragover", function(event) {
    event.preventDefault();
});
// Cuando el elemento p arrastrable sale del droptarget, restablece el estilo del borde del div
document.addEventListener("dragleave", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "";
    }
});
/* Para drop, evita el manejo predeterminado de datos del navegador (los enlaces se abren por defecto al soltar)
Restablece el color del texto de salida y el color del borde del DIV
Usa el método dataTransfer.getData() para obtener los datos arrastrados
El id del elemento de datos arrastrado es ('drag1')
Adjunta el elemento arrastrado al elemento drop */
document.addEventListener("drop", function(event) {
    event.preventDefault();
    if ( event.target.className == "droptarget" ) {
        document.getElementById("demo").style.color = "";
        event.target.style.border = "";
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
    }
});

Pruébalo »