DRAG & DROP en Javascript

febrero 13, 2024

Hola comunidad, me he planteado un proyecto sencillo utilizando Drag and Drop.

Para documentar el proyecto he creado este pos con los siguientes conceptos a tener en cuenta.

INDEX.HTML

<html>
<head>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  data = ev.dataTransfer.setData("text", ev.target.id);
  //data2 = ev.dataTransfer.setData("text", ev.target.value);
}

function drop1(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  // con esto recuperamos el id del campo que ha provocado el evento.
  //alert(document.getElementById(data).src);
  ev.target.appendChild(document.getElementById(data));

}
function drop2(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  // con esto recuperamos el id del campo que ha provocado el evento.
  //alert(document.getElementById(data).id);
  ev.target.appendChild(document.getElementById(data));

}
</script>
<style>
    #div1,#div2{
        border:1px solid red;
        height: 150px;
        width:150px;
    }
    li{
      list-style: none;
      width:150px;
      height:150px;
      background-color:grey;

    }
</style>
</head>
<body>

<ul id="div1" ondrop="drop1(event)" ondragover="allowDrop(event)"></ul>
<ul id="div2" ondrop="drop2(event)" ondragover="allowDrop(event)"></ul>

<li id="drag1" draggable="true" ondragstart="drag(event)"><img src="https://i.pinimg.com/originals/f7/b3/db/f7b3db9036f64203f261a894b1c6333b.gif"  width="336" height="69"></li>
<li id="drag2" draggable="true" ondragstart="drag(event)"><img  src="https://i.pinimg.com/originals/f7/b3/db/f7b3db9036f64203f261a894b1c6333b.gif"  width="336" height="69"></li>


</body>
</html>

Hacer que un elemento se pueda arrastrar

Primero que nada: para hacer que un elemento se pueda arrastrar, establezca el draggableatributo en verdadero:

<img draggable="true">

Qué arrastrar: ondragstart y setData()

Luego, especifique qué debería suceder cuando se arrastra el elemento.

En el ejemplo anterior, el ondragstartatributo llama a una función, arrastrar (evento), que especifica qué datos se arrastrarán.

El dataTransfer.setData()método 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 la identificación del elemento que se puede arrastrar ("drag1").

Dónde dejarse caer - ondragover

El ondragoverevento 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 event.preventDefault()método para el evento ondragover:

event.preventDefault()

Haz la caída - 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")
Agregue el elemento arrastrado al elemento de colocación