HTML Drag and Drop API
En HTML, cualquier elemento se puede arrastrar y soltar.
Ejemplo
Arrastre la imagen de W3Schools al rectángulo.
Drag and Drop
Arrastrar y soltar (Drag and drop) es una característica muy común. Es cuando "agarras" un objeto y lo arrastras a una ubicación diferente.
Soporte del navegador
Los números en la tabla especifican la primera versión del navegador que admite completamente Drag and Drop.
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
HTML Drag and Drop Ejemplo
El siguiente ejemplo es un ejemplo simple de drag and drop:
Ejemplo
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>
Inténtalo tú mismo »Puede parecer complicado, pero repasemos las diferentes partes de un evento de arrastrar y soltar.
Hacer que un elemento se pueda arrastrar
En primer lugar: para hacer que un elemento se pueda arrastrar, establezca el atributo draggable en verdadero:
<img draggable="true">
Qué Drag - ondragstart y setData()
Luego, especifique qué debería suceder cuando se arrastra el elemento.
En el ejemplo anterior, el atributo ondragstart llama a una función, arrastrar(evento), que especifica qué datos se arrastrarán.
El método dataTransfer.setData() establece el tipo de datos y el valor de los datos arrastrados:
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
En este caso, el tipo de datos es "text" y el valor es la identificación del elemento arrastrable ("drag1").
Dónde Drop — ondragover
El evento ondragover especifica dónde se pueden soltar los datos arrastrados.
De forma predeterminada, los datos/elementos no se pueden colocar en otros elementos. Para permitir una caída, debemos evitar el manejo predeterminado del elemento.
Esto se hace llamando al método event.preventDefault() para el evento ondragover:
event.preventDefault()
Hacer la Drop - ondrop
Cuando se sueltan los datos arrastrados, se produce un evento de colocación.
En el ejemplo anterior, el atributo ondrop llama a una función, drop(event):
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
Código explicado:
- Llame a preventDefault() para evitar que el navegador maneje los datos de forma predeterminada (el valor predeterminado es abrir como enlace al soltar)
- Obtenga los datos arrastrados con el método dataTransfer.getData(). Este método devolverá cualquier dato que se haya configurado en el mismo tipo en el método setData()
- Los datos arrastrados son la identificación del elemento arrastrado ("drag1")
- Agregar el elemento arrastrado al elemento de colocación
Más ejemplos
Ejemplo
Cómo arrastrar (y soltar) una imagen hacia adelante y hacia atrás entre dos elementos <div>:
