Arrastrar y soltar
Esta funcionalidad permite arrastrar un elemento y soltarlo sobre otro elemento.
El primer paso para poder arrastrar un elemento es agregarle el atributo draggable con el valor true:
1
<div draggable="true"></div>
Copied!
El siguiente paso es utilizar JavaScript (a través de los eventos que veremos a continuación) para saber cuándo el elemento empieza a ser arrastrado y cuándo es soltado.
Sobre el elemento arrastrado se disparan los siguientes eventos:
    dragstart: el usuario inició el arrastre del elemento.
    drag: el usuario está arrastrando el elemento (se dispara cada pocos cientos de milisegundos).
    dragend: el usuario terminó el arrastre.
Sobre el elemento destino se disparan los siguientes eventos:
    dragenter: el elemento arrastrado está entrando en la zona de soltado.
    dragleave: elemento arrastrado está saliendo de la zona de soltado.
    dragover: el elemento arrastrado está sobre la zona de soltado (se dispara cada pocos cientos de milisegundos)
    drop: el elemento fue soltado.
Veamos un ejemplo, arrastra la imagen del cuadrado de la izquierda al cuadrado de la derecha:
El primer paso de este ejemplo fue agregarle la propiedad draggable a la imagen:
1
<img id="logo" src="..." draggable="true">
Copied!
Como no hay forma de saber cuál elemento es el que se está arrastrando y soltando utilizamos el evento dragstart para guardar el id del elemento en un objeto llamado dataTransfer:
1
var img = document.querySelector("img")
2
img.addEventListener("dragstart", function(e) {
3
e.dataTransfer.setData("text", this.id)
4
})
Copied!
Por último, manejamos el evento drop sobre el cuadrado de la derecha. Para que se dispare el evento drop debemos invocar el método e.preventDefault() sobre los eventos dragenter y dragover (esto es un poco confuso pero así funciona).
1
var target = document.querySelector(".target")
2
target.addEventListener("dragenter", function(e) {
3
e.preventDefault()
4
})
5
target.addEventListener("dragover", function(e) {
6
e.preventDefault()
7
})
8
target.addEventListener("drop", function(e) {
9
e.preventDefault()
10
var id = e.dataTransfer.getData("text")
11
this.appendChild(document.getElementById(id))
12
})
Copied!
Para indicar visualmente que el cuadrado de la derecha es una zona de soltado, podemos crear una nueva clase dotted que muestre un borde de guiones y utilizar los eventos dragenter y dragleave para agregar y remover la clase:
1
.dotted { border: 1px dashed #333; }
Copied!
1
target.addEventListener("dragenter", function(e) {
2
e.preventDefault()
3
this.classList.add("dotted")
4
})
5
target.addEventListener("dragleave", function() {
6
this.classList.remove("dotted")
7
})
8
target.addEventListener("drop", function(e) {
9
// ...
10
this.classList.remove("dotted")
11
})
Copied!
Lo anterior se puede ver en el siguiente ejemplo:
Nota: La funcionalidad de arrastrar y soltar es bastante básica con JavaScript puro. Sin embargo, si estás utilizando jQuery puedes utilizar este plugin de jQuery UI que facilita la implementación y agrega funcionalidades como retroalimentación visual y restricciones de movimiento, entre otras.
Last modified 1yr ago
Copy link