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:
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:
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:
Arrastrar el texto al cuadro
Navegador compatible:
- Google Chrome 93.0
- Microsoft Edge 93.0
- Firefox 92.0
- Ópera 78.0
- Safari 14.1