El atributo de evento ondrop se usa para arrastrar un elemento o texto y soltarlo en una ubicación o destino válido. La función de arrastrar y soltar es la característica común de HTML 5.
Nota: De forma predeterminada, las imágenes y los enlaces se pueden arrastrar.
Hay diferentes eventos que se utilizan y ocurren antes del evento ondrop.
- Los eventos ocurren en el objetivo arrastrable
- Los eventos ocurren en el destino de colocación:
Etiquetas compatibles: admite todas las etiquetas HTML.
Los eventos ocurren en el destino que se puede arrastrar: hay tres eventos que se utilizan para arrastrar un elemento desde la ubicación de origen.
| Evento | Funcionalidad |
|---|---|
| ondragstart | Este evento se usa cuando el usuario comienza a arrastrar un elemento. |
| ondrag | El evento ondrag se usa para arrastrar un elemento. |
| ondragend | Este evento se utiliza para finalizar el arrastre de un elemento. |
Los eventos ocurren en la caída del objetivo: la lista de eventos que se utilizan para soltar un elemento se proporciona a continuación:
| Evento | Funcionalidad |
|---|---|
| ondragenter | Este evento se usa para arrastrar un elemento e ingresar en el destino de colocación válido. |
| ondragover | Este evento se usa cuando el elemento arrastrado está sobre la ubicación de colocación. |
| ondragleave | Este evento ocurre cuando el elemento arrastrado deja el destino de colocación. |
| ondrop | Este evento ocurre cuando el elemento arrastrado se suelta en el destino de colocación. |
Ejemplo:
html
<!DOCTYPE HTML>
<html>
<head>
<title>
HTML ondrop Event Attribute
</title>
<style>
/* CSS property to create box */
#geeks {
width: 220px;
height: 120px;
padding: 15px;
border: 3px solid #4cb96b;
}
</style>
<script>
/* script to allow drop of element */
function allowDrop(gg) {
gg.preventDefault();
}
/* script to drag an element */
function drag(gg) {
gg.dataTransfer.setData("text", gg.target.id);
}
/* script to drop an element */
function drop(gg) {
gg.preventDefault();
var data = gg.dataTransfer.getData("text");
gg.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drop the image into the rectangle:</p>
<!-- ondrop event call here -->
<div id = "geeks" ondrop = "drop(event)"
ondragover = "allowDrop(event)">
</div><br>
<img id = "gfg" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gg-4.png"
draggable = "true" ondragstart = "drag(event)" alt = "" />
</body>
</html>
Salida:
antes de arrastrar el elemento:
Después de arrastrar y soltar el elemento:
Navegadores compatibles: los navegadores compatibles con el atributo de evento HTML ondrop se enumeran a continuación:
- Google Chrome 4.0
- Internet Explorer 9.0
- Firefox 3.5
- Safari 6.0
- Ópera 12.0
Publicación traducida automáticamente
Artículo escrito por motamarriphani y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA