Cómo implementar Drag and Drop con HTML5

Educación online efectiva

Aprende con expertos de la industria

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

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">  <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.

Educación online efectiva

Aprende con expertos de la industria

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE