En HTML, cualquier elemento se puede arrastrar y soltar.

Drag and Drop

Drag and Drop es una característica muy común. Es cuando "agarras" un objeto y lo arrastras a una ubicación diferente.

Ejm

El siguiente ejemplo es un ejemplo simple de arrastrar y soltar.

Ejm

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<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>

<p>Drag the W3Schools image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" 
ondragstart="drag(event)" width="336" height="69">

</body>
</html>

Hacer que un elemento se pueda arrastrar

En primer lugar: para hacer que un elemento se pueda arrastrar, establece el atributo draggable en true.

<img draggable="true">

Qué arrastrar: ondragstart y setData()

Luego, especifica lo que debe suceder cuando se arrastra el elemento.

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 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 "texto" y el valor es el id del elemento arrastrable ("drag1").

Dónde caer - 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()

ondrop

Cuando se sueltan los datos arrastrados, se produce un evento de soltar. 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

  • Llama a preventDefault() para evitar que el navegador maneje los datos de manera predeterminada (el valor predeterminado es abrir como enlace al soltar)
  • Obtén 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 la identificación del elemento arrastrado ("drag1")
    Agrega el elemento arrastrado al elemento soltado