Ya en la primera parte de este tutorial vimos como iniciar el evento drag del arrastre de los elementos, es decir, hicimos una parte del trabajo, vimos como interactuar con los diferentes eventos de esa primera sección.
Ahora nos falta saber cómo activar la zona donde depositar el elemento, ya es la acción complementaria que nos permitirá lograr funcionalidades completas en nuestra página.
Creando la zona de depósito
Esta es la zona donde vamos a dejar los elementos que arrastramos, para poder manipular esta zona vamos a contar con varios eventos, para poder entender de mejor forma cómo manejar dichos eventos listaremos cada uno y explicaremos su funcionamiento.
Eventos
Una vez que ya sabemos cuáles son los eventos que tenemos a nuestra disposición, vamos a construir un código sencillo, en el cual al arrojar o depositar un elemento que hayamos arrastrado este se muestre en la zona de depósito.
Para ello nos valdremos de algunas funciones del inner HTML donde vamos clonar el elemento que sea arrojado a la zona.
Veamos el código del ejemplo:
Si nos fijamos, definimos el elemento target como el elemento que contendrá la zona de depósito, una vez hecho esto definimos que va a suceder en cada uno de los eventos, si nos fijamos en el evento drop es donde ocurre el paso final, aquí clonaremos el elemento arrastrado y gracias al inner HTML vamos a mostrarlo de forma asíncrona al momento en que soltemos el elemento que venimos arrastrando.
Otra cosa que debemos prestar atención es a sobrescribir el evento default del navegador, esto lo gestionamos al crear la función handleDrag, de esta manera evitamos que el navegador pueda interpretar las instrucciones de una forma que no sea esperada por nosotros.
En nuestro navegador debería verse de la siguiente forma:
Finalmente hemos logrado hacer un drag & drop en HTML5 sin depender de librerías externas, ahora con un poco de imaginación podremos hacer muchas funcionalidades, como por ejemplo un carrito de compra que trabaje solo con drag & drop.
Ahora nos falta saber cómo activar la zona donde depositar el elemento, ya es la acción complementaria que nos permitirá lograr funcionalidades completas en nuestra página.
Creando la zona de depósito
Esta es la zona donde vamos a dejar los elementos que arrastramos, para poder manipular esta zona vamos a contar con varios eventos, para poder entender de mejor forma cómo manejar dichos eventos listaremos cada uno y explicaremos su funcionamiento.
Eventos
- Dragenter: Se activa cuando un elemento arrastrado ingresa en el espacio de la pantalla que hemos definido para la zona de depósito.
- Dragover: Es disparado cuando el elemento arrastrado se mueve dentro de la zona de depósito que ya hemos definido.
- Dragleave: Es activado al momento en el cual un elemento arrastrado sale de la zona de depósito.
- Drop: Es el evento que se activa al momento de dejar un elemento en la zona de depósito.
Una vez que ya sabemos cuáles son los eventos que tenemos a nuestra disposición, vamos a construir un código sencillo, en el cual al arrojar o depositar un elemento que hayamos arrastrado este se muestre en la zona de depósito.
Para ello nos valdremos de algunas funciones del inner HTML donde vamos clonar el elemento que sea arrojado a la zona.
Veamos el código del ejemplo:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
#src > * {float:left;}
#src > img {border: thin solid black; padding: 2px; margin:4px;}
#target {border: thin solid black; margin:4px;}
#target { height: 81px; width: 81px; text-align: center; display: table;}
#target > p {display: table-cell; vertical-align: middle;}
img.dragged {background-color: lightgrey;}
</style>
</head>
<body>
<div id="src">
<img draggable="true" id="banana" src="banana100.png" alt="banana"/>
<img draggable="true" id="apple" src="apple100.png" alt="apple"/>
<img draggable="true" id="cherries" src="cherries100.png" alt="cherry"/>
<div id="target">
<p id="msg">Drop Here</p>
</div>
</div>
<script>
var src = document.getElementById("src");
var target = document.getElementById("target");
var msg = document.getElementById("msg");
var draggedID;
target.ondragenter = handleDrag;
target.ondragover = handleDrag;
function handleDrag(e) {
e.preventDefault();
}
target.ondrop = function(e) {
var newElem = document.getElementById(draggedID).cloneNode(false);
target.innerHTML = "";
target.appendChild(newElem);
e.preventDefault();
}
src.ondragstart = function(e) {
draggedID = e.target.id;
e.target.classList.add("dragged");
}
src.ondragend = function(e) {
var elems = document.querySelectorAll(".dragged");
for (var i = 0; i < elems.length; i++) {
elems[i].classList.remove("dragged");
}
}
</script>
</body>
</html>
Si nos fijamos, definimos el elemento target como el elemento que contendrá la zona de depósito, una vez hecho esto definimos que va a suceder en cada uno de los eventos, si nos fijamos en el evento drop es donde ocurre el paso final, aquí clonaremos el elemento arrastrado y gracias al inner HTML vamos a mostrarlo de forma asíncrona al momento en que soltemos el elemento que venimos arrastrando.
Otra cosa que debemos prestar atención es a sobrescribir el evento default del navegador, esto lo gestionamos al crear la función handleDrag, de esta manera evitamos que el navegador pueda interpretar las instrucciones de una forma que no sea esperada por nosotros.
En nuestro navegador debería verse de la siguiente forma:
Finalmente hemos logrado hacer un drag & drop en HTML5 sin depender de librerías externas, ahora con un poco de imaginación podremos hacer muchas funcionalidades, como por ejemplo un carrito de compra que trabaje solo con drag & drop.
