Como desarrolladores sabemos que el atractivo visual es importante; no es por nada que dicen que
"de los ojos nace el amor". Y si queremos que nuestra interfaz de usuario enamore a cualquiera, es indispensable hacerla dinámica. Lograr esto en el pasado implicaba el uso de bibliotecas como jQuery o similares. Sin embargo,
HTML5 vino a salvarnos y a ahorrarnos mucho tiempo, con un arsenal de herramientas nativas que, definitivamente, nos hacen la vida más fácil.
En este artículo vamos a explorar la API
Drag and Drop (arrastrar y soltar).
Esta propiedad tiene soporte nativo para la mayoría de los navegadores y se basa en eventos que podemos activar con nuestro mouse; siempre y cuando hayamos creado elementos que se puedan arrastrar en nuestra página web. Pero, ¿cómo funciona? La idea es que el usuario pueda hacer clic y mantenga pulsado el botón del mouse sobre cualquier objeto para arrastrarlo hacia otra ubicación y soltarlo al dejar de presionar el botón. A este proceso se le conoce como
evento.
Los eventos que encontramos en DnD son:
- ondragstart: se inicializa cuando comienza la actividad de arrastrar
- ondrag: está activo en cada movimiento del mouse cuando se arrastra un elemento
- ondragcenter: sucede cuando el elemento arrastrado ingresa a un receptor de soltado
- ondragleave: sucede cuando el elemento arrastrado sale de un receptor de soltado
- ondragover: eiene lugar con cada movimiento del mouse cuando se arrastra un elemento dentro del área de un receptor de soltado
- ondrop: se produce cuando el elemento arrastrado es soltado dentro del área de un receptor de soltado
- ondragend: es producido cuando se termina el proceso de arrastre. Aún cuando el elemento arrastrado es dejado dentro o fuera de un elemento receptor de soltado
Además de esta serie de eventos es importante mencionar la propiedad
datatransfer. Es el centro de desarrollo de toda la actividad en DnD; pues contiene los datos que se envían cuando se realiza la acción de arrastre Esta propiedad se establece en el evento
dragstart y realiza su proceso en el evento
drop.
Los métodos de datatrasnfer son:
- setData: su uso se basa en declarar los datos que serán enviados y su tipo. Además, también recibe datos especiales como url y text y datos regulares como text/html y text/plain. Cualquier otro tipo de dato se puede especificar en caso de que sea necesario.
- clearData: elimina los datos del tipo especificado
- getData: retorna los datos del tipo especificado
- setDragImage: personaliza la imagen que aparece al lado del puntero cuando el elemento está siendo arrastrado. Utiliza el tamaño X,Y de la imagen
- Type: permite obtener un arreglo con todos los tipos de elementos utilizados en el evento dragstart
- files: retorna una lista de los archivos que están siendo arrastrados
- dropEffect: retorna el tipo de operación solicitada para el elemento arrastrado. Los valores posibles son: copy, move, link y none.
- effectAllowed: retorna el tipo de operación que se ha permitido. Los valores posibles son: copy, move, link, copyLink, copyMove, linkMove, all, none y uninitialized
En Drag&Drop se recomienda utilizar dos tipos de eventos:
preventDefault() y
stopPropagation(). Estos bloquearán el comportamiento normal del navegador. Por ejemplo, si el elemento a mover incluye un link, este no nos redireccionará a la página y podrá ser arrastrado sin problema.
¿Mucha teoría? ¡Vamos a la práctica!
En esta ocasión haremos un ejercicio simple y bastante práctico donde utilizaremos los eventos
ondragstart, ondragover,ondrop y
dataTransfer; con los métodos
.setData y
preventDefault. Con este ejemplo podremos arrastrar un cuadro verde hacia un cuadro azul. Tendremos separado nuestro ejercicio en 3 archivos; el HTML, el CSS y el JavaScript:
HTML: aquí crearemos los
divs que serán los elementos con los cuales vamos a hacer el ejercicio de arrastrar y soltar.
[html]
<!DOCTYPE html>
<html>
<head>
<title>Api HTML5 drag and drop (Arrastrar y soltar)</title>
<meta charset="utf-8">
<!-- Latest Bootstrap | compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="ddd-style.css" />
</head>
<body>
<div class="container">
<h1><p>Drag and Drop (Arrastrar y Soltar) en HTML5</p>
<div id="drop1"></div>
<div id="drag" draggable="true"></div>
<h2>Arrastra el azul verde al cuadro gris</h2>
</div>
<script src="ddd-script.js"></script>
</body>
</html>
[/html]
CSS: con unas pocas lineas de CSS, le damos estilo a los elementos que declaramos en el HTML.
[css]
body{
text-align: center;
}
/*Creacion de los 2 elementos*/
#drag {
width: 100px;
height: 100px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #3498db;
margin: 1.5em auto 0;
}
#drop1 {
width: 300px;
height: 300px;
background:#ecf0f1;
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
border: 2px solid #bdc3c7;
margin: 1em auto 0;
}
[/css]
JavaScript: y por último tenemos nuestro script, el que hace que la magia ocurra.
[javascript]
function DragDrop(drag, drop) {
var drag = document.getElementById(drag);
var drop = document.getElementById(drop);
drag.ondragstart = function(e)
{
//Guardamos el id del elemento para transferirlo al elemento drop
//Contenido es una clave que nos permitirá acceder al valor asignado
e.dataTransfer.setData("contenido", e.target.id);
}
drop.ondragover = function(e){
//Cancelar el evento que impide que podamos soltar el elemento drag
e.preventDefault();
}
drop.ondrop = function(e){
//Obtenemos los datos a través de la clave contenido, en este caso el id
var id = e.dataTransfer.getData("contenido");
e.target.appendChild(document.getElementById(id));
}
}
window.onload = function(){
DragDrop("drag", "drop1");
}
[/javascript]
DEMO
Este es un demo simple de DnD; sin embargo, es posible lograr grandes cosas con esta herramienta tan poderosa que nos ofrece HTML5. En el
Curso Profesional de Front-end de Platzi podrás aprender cómo usar esta API; e incluso a combinar esta propiedad con librerías y más opciones en JavaScript para lograr proyectos increíbles.
