HTML Drag and Drop API

---

En HTML, cualquier elemento se puede arrastrar y soltar.

---

Ejemplo:

Vea como se arrastra la imagen al rectángulo.👆

---

Drag & drop

Arrastrar (drag) y soltar (drop) es una característica muy común. Es cuando agarras un objeto y lo arrastras a una ubicación diferente.

---

Compatibilidad con el navegador

El número en la siguiente tabla, especifica la primera versión del navegador que fue completamente compatible con la API drap and drop:

---

Ejemplo

El siguiente ejemplo, es un ejemplo simple de la API drag and drop:

Puede parecer complicado, pero repasemos todas las diferentes partes de un evento drag y drop.

---

Haz un elemento arrastrable

En primer lugar, para hacer que un elemento se pueda arrastrar, establezca el atributo draggable a true:

Ejemplo:

<!-- Elemento arrastrable -->
<img draggable="true">

---

Métodos para arrastrar elementos

Luego, especifique lo que debe suceder cuando un elemento se arrastra

En el ejemplo anterior, 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 dato y el valor de los datos arrastrados:

//Funcion arrastrar
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

En este caso, el tipo de datos es “texto” y el valor es el id del elemento arrastrable (”drag1”).

---

Dónde soltar

El evento ondragover especifica dónde se pueden soltar los datos arrastrados.

Por defecto, los datos/elementos no se pueden soltar sobre otros elementos. Para permitir soltar, debemos cambiar el manejo predeterminado del elemento.

Esto se hace llamando al método event.preventDefault() para el evento ondragover.

//Evento
event.preventDefault();

---

Soltar

Cuando se sueltan los datos arrastrados, se produce el evento soltar.

En el ejemplo anterior, el atributo ondrop llama a una función, drop(event):

//Funcion soltar
function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

Código explicado:

• Llame al método preventDefault() para evitar que el navegador maneje los datos de manera predeterminada

• 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()

• Los datos arrastrados son del id del elemento arrastrado ("drag1")

• Agregue el elemento arrastrado al elemento habilitado para soltar

---

Más ejemplos

Cómo arrastrar (y soltar) una imagen de un lado a otro entre dos elementos:

Ejemplo:

---

Resumen

En HTML, cualquier elemento se puede arrastrar y soltar con la API drag and drop HTML.

---

Traducido con 💚 desde W3Schools.com