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