ondragenterEvento

Ejemplo

Ejecutar JavaScript cuando el elemento arrastrado entra en el destino de colocación:

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

Definición y uso

El evento ondragenter se activa cuando el elemento arrastrado o el texto seleccionado entra en un destino de colocación válido.

Los eventos ondragenter y ondragleave pueden ayudar a los usuarios a comprender mejor el proceso de entrada y salida de un elemento arrastrable en el área de colocación. Puedes establecer diferentes colores de fondo cuando el elemento arrastrable entra y sale del área de colocación.

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

Nota:Para que un elemento sea arrastrable, es necesario usar 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 destino de arrastre(elemento de origen):
- ondragstart- Se activa cuando el usuario comienza a arrastrar el elemento.
- ondrag- Se activa mientras el elemento se está arrastrando.
- ondragend- Se activa cuando el usuario termina de arrastrar el elemento.

Eventos que se activan al soltar sobre el destino:
- ondragenter - Este evento se activa cuando el objeto arrastrado por el ratón entra en el área de su contenedor.
- ondragover- Este evento se activa cuando un objeto arrastrado se mueve dentro del área del contenedor de otro objeto.
- ondragleave- Este evento se activa cuando el objeto arrastrado por el ratón sale del área de su contenedor.
- ondrop- Este evento se activa cuando se suelta el botón del ratón durante un arrastre.

Compatibilidad del navegador

Los números de la tabla indican la primera versión del navegador que admite el evento.

Evento
ondragenter	4.0	9.0	3.5	6.0	12.0

Sintaxis

En HTML:

<element ondragenter="myScript">Pruébalo

En JavaScript:

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

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

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

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

Detalles técnicos

¿Admite burbujeo?:	Yes
¿Se puede cancelar?:	Yes
Tipo de evento:	DragEvent
Etiquetas HTML admitidas:	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);
// Al arrastrar el elemento p, se muestra algo de texto
document.getElementById("demo").innerHTML = "Comenzando a arrastrar el elemento p.";
// Cambia la opacidad del elemento arrastrado
    event.target.style.opacity = "0.4";
});
// Mientras se arrastra el elemento p, cambia el color del texto de salida
document.addEventListener("drag", function(event) {
    document.getElementById("demo").style.color = "red";
});
// Al terminar de arrastrar el elemento p, muestra algo de texto y restablece 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 completar el arrastre */
// Cuando el elemento p completa el arrastre y entra en droptarget, 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 soltarse en otros elementos. Para drop, debemos evitar el manejo predeterminado del elemento.
document.addEventListener("dragover", function(event) {
    event.preventDefault();
});
// Cuando el elemento p arrastrable sale de 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 (en drop, los enlaces se abren por defecto)
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 ("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 »