ondragstartEvento

Ejemplo

Ejecutar JavaScript cuando el usuario comience a arrastrar el elemento <p>:

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

Este artículo contiene más ejemplos al final.

Definición y uso

El evento ondragstart se activa cuando el usuario comienza a arrastrar un elemento o texto seleccionado.

Arrastrar y soltar es una característica muy común en HTML5. Puedes encontrar más información en nuestro tutorial de HTML:Arrastrar y soltar en HTML5。

Nota:Para hacer que un elemento sea arrastrable, se necesita el atributo HTML5draggableatributo.

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

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

Eventos que se activan en el objetivo de arrastre(elemento de origen):
- ondragstart - Se activa cuando el usuario comienza a arrastrar el elemento.
- ondrag- Se activa mientras el elemento está siendo arrastrado.
- ondragend- Se activa cuando el usuario termina de arrastrar el elemento.

Eventos que se activan al soltar sobre el objetivo:
- ondragenter- Este evento se activa cuando el objeto arrastrado con el mouse entra dentro de los límites de su contenedor.
- ondragover- Este evento se activa cuando un objeto arrastrado se mueve dentro de los límites del contenedor de otro objeto.
- ondragleave- Este evento se activa cuando el objeto arrastrado con el mouse sale de los límites de su contenedor.
- ondrop- Este evento se activa al soltar el botón del mouse durante un arrastre.

Soporte del navegador

Nota:Al arrastrar un elemento, el evento ondragover se activa cada 350 milisegundos.

Evento
ondragstart	4.0	9.0	3.5	6.0	12.0

Sintaxis

En HTML:

<element ondragstart="myScript">Pruébalo

En JavaScript:

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

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

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

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

Detalles técnicos

¿Admite propagación (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 activa 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);
// Muestra algo de texto al arrastrar el elemento p
document.getElementById("demo").innerHTML = "Comenzando a arrastrar el elemento p.";
// Cambiar la opacidad del elemento arrastrado
    event.target.style.opacity = "0.4";
});
// Cambiar 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, mostrar algo de texto y restablecer la opacidad
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Se completó el arrastre del elemento p";
    event.target.style.opacity = "1";
});
/* Se activa al finalizar el arrastre */
// Cambiar el estilo del borde del div cuando el elemento p arrastrado entra en droptarget
document.addEventListener("dragenter", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "3px dotted red";
    }
});
// Por defecto, los datos/elementos no se pueden soltar 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 de droptarget, restablecer el estilo del borde del div
document.addEventListener("dragleave", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "";
    }
});
/* Para drop, prevenir el manejo predeterminado del navegador de datos (en drop, los enlaces se abren por defecto)
Restablecer el color del texto de salida y el color del borde del DIV
// Usar el método dataTransfer.getData() para obtener los datos arrastrados
// El id del elemento de datos arrastrado ("drag1")
Adjuntar 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 »