En este artículo, conoceremos HTML Drag & Drop , también entenderemos su implementación con la ayuda de ejemplos.
Arrastrar y soltar es un concepto muy interactivo y fácil de usar que facilita mover un objeto a una ubicación diferente tomándolo. Esto permite al usuario hacer clic y mantener presionado el botón del mouse sobre un elemento, arrastrarlo a otra ubicación y soltar el botón del mouse para soltar el elemento allí. En HTML 5, arrastrar y soltar es mucho más fácil de codificar y cualquier elemento se puede arrastrar.
Eventos de arrastrar y soltar: hay varios eventos de arrastrar y soltar, algunos de ellos se enumeran a continuación:
- ondrag: se usa cuando se arrastra el elemento o la selección de texto en HTML.
- ondragstart : se usa para llamar a una función, arrastrar (evento), que especifica qué datos se arrastrarán.
- ondragenter : Se utiliza para determinar si el destino de lanzamiento aceptará o no el lanzamiento. Si se va a aceptar la caída, entonces este evento debe cancelarse.
- ondragleave : Ocurre cuando el mouse deja un elemento antes de un objetivo de colocación válido mientras ocurre el arrastre.
- ondragover : especifica dónde se pueden soltar los datos arrastrados.
- ondrop : Especifica dónde se ha producido el drop al final de la operación de arrastre.
- ondragend : Ocurre cuando el usuario ha terminado de arrastrar un elemento.
Procedimiento para arrastrar y soltar:
- Paso 1: Haz que un objeto se pueda arrastrar
- Primero establezca el atributo arrastrable en verdadero para que ese elemento sea arrastrable <img draggable = “true”>
- Luego, especifique lo que debe suceder cuando se arrastra el elemento. El atributo ondragstart llama a una función, drag(event), que especifica qué datos se arrastrarán. El método dataTransfer.setData() establece el tipo de datos y el valor de los datos arrastrados
- El detector de eventos ondragstart establecerá los efectos permitidos (copiar, mover, vincular o alguna combinación).
- Paso 2: Dejar caer el objeto
- El evento ondragover especifica dónde se pueden colocar los datos arrastrados. De forma predeterminada, los datos/elementos no se pueden colocar en otros elementos. Para permitir una caída, debe evitar el manejo predeterminado del elemento. Esto se hace llamando al método event.preventDefault()
- Finalmente, el evento drop, que permite realizar el drop real.
Ejemplo 1: Este ejemplo muestra el arrastrar y soltar de una imagen en HTML.
HTML
<!DOCTYPE HTML> <html> <head> <style> #getData { width: 250px; height: 200px; padding: 10px; border: 1px solid #4f4d4d; } </style> <script> function allowDrop(even) { even.preventDefault(); } function drag(even) { even.dataTransfer.setData("text", even.target.id); } function drop(even) { even.preventDefault(); var fetchData = even.dataTransfer.getData("text"); even.target.appendChild(document.getElementById(fetchData)); } </script> </head> <body> <h3>Drag the GeekforGeeks image into the rectangle:</h3> <div id="getData" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> <br> <img id="dragData" src="gfg.png" draggable="true" ondragstart="drag(event)" width="250" height="200"> </body> </html>
Producción:
![](https://media.geeksforgeeks.org/wp-content/uploads/20210916211742/20210916211019.gif)
Arrastrando la imagen al cuadro
El objeto de transferencia de datos: la propiedad de transferencia de datos se utiliza cuando ocurre todo el proceso de arrastrar y soltar. Se utiliza para retener los datos arrastrados desde la fuente y soltarlos en la ubicación deseada. Estas son las propiedades asociadas a él:
- dataTransfer.setData(formato, datos) : Se utiliza para configurar los datos que se arrastrarán.
- dataTransfer.clearData(formato): Se utiliza para llamar a esta función sin argumento que borra todos los datos. Llamarlo con un argumento de formato elimina solo esos datos específicos.
- dataTransfer.getData(formato): Devuelve los datos del formato especificado. Si no hay tales datos, devuelve la string vacía.
- dataTransfer.types: esta propiedad devuelve una array de todos los formatos que se establecieron en el evento dragstart.
- dataTransfer.files : se utiliza para devolver todos los archivos que se van a soltar.
- dataTransfer.setDragImage(elemento, x, y): se utiliza para mostrar una imagen existente como la imagen de arrastre en lugar de la imagen predeterminada junto al cursor. Las coordenadas especifican la ubicación de entrega.
- dataTransfer.addElement (elemento): se utiliza para agregar el elemento especificado para que se dibuje como una imagen de comentarios de arrastre.
- dataTransfer.effectAllowed(value): le indicará al navegador que solo los tipos de operaciones enumerados están permitidos para el usuario. La propiedad se puede establecer en los siguientes valores: none, copy, copyLink, copyMove, link, linkMove, move, all y uninitialized.
- dataTransfer.dropEffect(value): se usa para controlar la retroalimentación que se le da al usuario durante los eventos dragenter y dragover. Cuando el usuario se desplaza sobre un elemento de destino, el cursor del navegador indicará qué tipo de operación se llevará a cabo (por ejemplo, una copia, un movimiento, etc.). El efecto puede tomar uno de los siguientes valores: ninguno, copiar, vincular, mover.
Ejemplo 2: Este ejemplo ilustra el uso de la propiedad arrastrable del elemento.
HTML
<!DOCTYPE HTML> <html> <head> <title>Drag and Drop box</title> <script> function allowDrop(ev) { ev.preventDefault(); } function dragStart(ev) { ev.dataTransfer.setData("text", ev.target.id); } function dragDrop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> <style> #box { margin: auto; width: 50%; height: 200px; border: 3px solid green; padding: 10px; } #box1, #box2, #box3 { float: left; margin: 5px; padding: 10px; } #box1 { width: 50px; height: 50px; background-color: #F5B5C5; } #box2 { width: 100px; height: 100px; background-color: #B5D5F5; } #box3 { width: 150px; height: 150px; background-color: #BEA7CC; } p { font-size: 20px; font-weight: bold; text-align: center; } .gfg { font-size: 40px; color: #009900; font-weight: bold; text-align: center; } </style> </head> <body> <div class="gfg">GeeksforGeeks</div> <p>Drag and drop of boxes</p> <div id="box"> <div id="box1" draggable="true" ondragstart="dragStart(event)"> </div> <div id="box2" draggable="true" ondragstart="dragStart(event)"> </div> <div id="box3" ondrop="dragDrop(event)" ondragover="allowDrop(event)"> </div> </div> </body> </html>
Explicación:
- Inicie el arrastre estableciendo la propiedad arrastrable del elemento que se arrastrará en verdadero.
- Obtenga los datos arrastrados con el método dataTransfer.getData() . Este método devolverá cualquier dato que se haya establecido en el mismo tipo en el método setData() .
- Llame al método event.preventDefault() para permitir la eliminación de elementos en otros elementos evitando el manejo predeterminado del elemento.
- El elemento se almacena en los datos variables que agregamos al elemento desplegable.
Producción:
Ejemplo 3: Este ejemplo ilustra cómo arrastrar y soltar una imagen.
HTML
<!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function dragStart(ev) { ev.dataTransfer.setData("text", ev.target.id); } function dragDrop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> <style> .div1 { width: 240px; height: 75px; padding: 10px; border: 1px solid black; background-color: #F5F5F5; } p { font-size: 20px; font-weight: bold; } .gfg { font-size: 40px; color: #009900; font-weight: bold; } </style> </head> <body> <div class="gfg">GeeksforGeeks</div> <p>Image Drag and Drop in boxes</p> <div class="div1" ondrop="dragDrop(event)" ondragover="allowDrop(event)"> <img id="drag1" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png" draggable="true" ondragstart="dragStart(event)" width="220" height="70"> </div> <br> <div class="div1" ondrop="dragDrop(event)" ondragover="allowDrop(event)"> </div> </body> </html>
Producción:
![](https://media.geeksforgeeks.org/wp-content/uploads/20210916213901/20210916213311.gif)
Arrastrar la imagen a otra caja
Ejemplo 4: Este ejemplo demuestra cómo arrastrar el texto en el cuadro rectangular en HTML.
HTML
<!DOCTYPE HTML> <html> <head> <title>Draggable Text</title> <style> .dropbox { width: 350px; height: 40px; padding: 15px; border: 1px solid #292828; } h1 { color: green; } </style> <script> function droppoint(event) { var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); event.preventDefault(); } function allowDropOption(event) { event.preventDefault(); } function dragpoint(event) { event.dataTransfer.setData("Text", event.target.id); } </script> </head> <body> <center> <h1>GeeksforGeeks</h1> <h3>Drag the text in the rectangle</h3> <div class="dropbox" ondrop="droppoint(event)" ondragover="allowDropOption(event)"> </div> <p id="drag1" draggable="true" ondragstart="dragpoint(event)"> GeeksforGeeks: A computer science portal for geeks. </p> </center> </body> </html>
Producción:
![](https://media.geeksforgeeks.org/wp-content/uploads/20210919095420/20210919094024.gif)
Arrastrar el texto al cuadro
Navegador compatible:
- Google Chrome 93.0
- Microsoft Edge 93.0
- Firefox 92.0
- Ópera 78.0
- Safari 14.1