Codificación aprenderaprogramar.com: CU01196E
DRAG AND DROP
Seguramente hayas trabajado con Windows y con el explorador de archivos de Windows, donde se pueden cambiar archivos de ubicación simplemente haciendo click sobre ellos, arrastrándolos y soltándolos. Este proceso de arrastrar y soltar (drag and drop) resulta muy cómodo para realizar determinadas tareas y se ha incorporado a los desarrollos web a través de lo que se ha llamado Api Drag and Drop .
Con el api Drag and Drop podremos arrastrar y soltar imágenes, textos, enlaces, archivos o cualquier elemento que se nos ocurra, gracias a que la nueva especificación HTML incorpora todo lo necesario para facilitar que los programadores puedan incorporar esta potencialidad en desarrollos web y apps para smartphones.
EVENTOS DRAG AND DROP
Un aspecto importante es que con la nueva especificación disponemos de nuevos eventos para facilitar la programación del arrastre y soltado. Para entender estos eventos debemos tener en cuenta que toda operación de arrastre y soltado implica a dos elementos: el elemento origen que se selecciona y arrastra (al que a veces se llama fuente o source) y el elemento de destino, que es el elemento encima del cual se suelta el elemento que se ha arrastrado.
|
Nombre del evento |
Descripción aprenderaprogramar.com |
|
dragstart |
Se dispara sobre el elemento origen cuando comienza el arrastre. En este momento se definen los datos asociados al elemento de origen. |
|
drag |
Similar al evento mousemove, pero afecta al elemento origen que se ha seleccionado y se está arrastrando. |
|
dragend |
El elemento origen que se ha arrastrado sufre el evento dragend cuando termina el arrastre. Esto no aplica si lo que se arrastra es un archivo desde el sistema operativo hacia el navegador. |
|
dragenter |
Se dispara sobre el elemento de destino cuando el puntero del ratón entra dentro del área en que se puede realizar el soltado. |
|
dragover |
Similar al evento mousemove, pero afecta al elemento destino cuando sobre él se está arrastrando algo y todavía no se ha soltado. |
|
drop |
Evento que se dispara en el elemento de destino cuando se suelta algo que se estaba arrastrando sobre él. |
|
dragleave |
Evento que se dispara en el elemento de destino cuando el puntero del ratón sale del área ocupada por este elemento. |
Una cuestión a tener en cuenta es que para evitar acciones de defecto del navegador sobre elementos destinados a ser arrastrados y soltados deberemos usar preventDefault(), instrucción de la que ya hemos hablado anteriormente en este curso.
Todos los eventos de arrastre tienen una propiedad denominada dataTransfer que se usa para almacenar la información sobre lo que se está arrastrando. La información sobre lo que se está arrastrando se compone de dos elementos: el tipo o formato de lo que se arrastra, y su valor. Por ejemplo el tipo puede ser texto y su valor “aprenderaprogramar.com”. O el tipo podría ser una url y su valor “http://aprenderaprogramar.com”.
En este curso no vamos a entrar a estudiar en detalle la api drag and drop, no obstante, al igual que la api Canvas, puede ser muy interesante para determinadas aplicaciones y tiene un gran potencial.
Algunos navegadores antiguos no admiten drag and drop, pero todos los navegadores modernos sí lo hacen.
Veamos brevemente un ejemplo que nos dé una idea de qué es y para qué sirve drag and drop. Escribe este código en en editor de textos y guárdalo con un nombre de archivo como ejemplo1.html:
|
<!DOCTYPE HTML> <html> <head><meta charset="utf-8"><title>Ejemplo drag and drop aprenderaprogramar.com</title> <style> *{font-family:sans-serif;} #div1 {width:350px;height:70px;padding:30px;border:1px solid #aaaaaa;} </style> <script> function allowDrop(ev) {ev.preventDefault();} function drag(ev) {ev.dataTransfer.setData("text", ev.target.id);} function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); document.getElementById(data).style.color="blue"; setTimeout(function() {cambiarEstilo (document.getElementById(data))}, 700); } function cambiarEstilo(elemento) { if (elemento.style.color=="blue") { elemento.style.color="red"; } else {elemento.style.color="blue" } setTimeout(function() {cambiarEstilo (elemento)}, 700); } </script> </head> <body> <p>Mueve el texto al rectángulo:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br/> <div id="drag1" draggable="true" ondragstart="drag(event)" style="border-style:solid; display:inline-block; padding:5px;"> Curso JavaScript aprenderaprogramar.com </div> </body> </html> |
El resultado esperado es que se nos muestre un texto dentro de un rectángulo junto a un rectángulo vacío. Cuando arrastremos el texto sobre el rectángulo vacío, la caja del texto quedará dentro del rectángulo vacío y empezará a parpadear en color azul y rojo (ten en cuenta que en navegadores antiguos no se mostrará el resultado, sólo los navegadores modernos admiten drag and drop).
LOS ARCHIVOS Y DRAG AND DROP
Hay muchos aspectos de drag and drop que habría que citar pero que no vamos a abordar en este curso. No obstante, hay uno de ellos que merece ser comentado por su especial importancia: drag and drop facilita el arrastre de archivos, no sólo dentro del navegador, sino desde nuestro ordenador (nuestro sistema operativo) al navegador.
Esta potencialidad junto al uso de otras técnicas de programación hace más fácil de lo que era antes la operación con archivos, bajada de archivos desde el servidor a nuestro computador, o subida de archivos desde nuestro computador al servidor. Aunque no vayamos a profundizar en esto, nos ha parecido interesante citarlo para que lo tengas presente por si te surje la necesidad de realizar operaciones con archivos en aplicaciones web usando drag and drop.
¿PARA QUÉ PUEDE SERVIR DRAG AND DROP?
Drag and drop facilita la interacción del usuario con el navegador y puede ser empleado para todo aquello que se nos ocurra. Entre las aplicaciones habituales podemos indicar las siguientes:
a) Permitir al usuario arrastrar los archivos a subir a un servidor (por ejemplo archivos de imágenes).
b) Permitir al usuario realizar selecciones arrastrando, por ejemplo permitir que elija por un lado un modelo de sillón y por otro lado un modelo de tapizado para el sillón, arrastrando la opción elegida a partir de varias opciones posibles.
c) Aplicaciones de comercio electrónico donde el usuario elige lo que va a comprar y lo arrastra a su cesta de la compra.
c) Crear juegos donde el usuario arrastra y suelta elementos.
d) Permitir al usuario ordenar elementos (por ejemplo cambiar el orden de una colección de fotografías arrastrando y soltando éstas a distintas posiciones).
e) Crear aplicaciones de diseño donde los diseños se crean arrastrando y soltando elementos. Puede usarse para cualquier tipo de aplicación: diseño industrial, jardinería, decoración, ingeniería, y por supuesto para diseño web de páginas web completas o de elementos determinados como formularios. Combinando drag and drop con otras técnicas puede permitirse editar propiedades de los elementos, cambiar su aspecto, moverlos de sitio, etc.
f) Permitir crear efecto de ventanas tipo Windows en desarrollos web, que el usuario puede arrastrar y soltar en diferentes puntos, simulando que estuviera trabajando con una aplicación de escritorio.
g) Crear efectos de desplegado: podemos simular que una imagen se va desplegando o un texto se va haciendo visible o cambiando su aspecto arrastrando un elemento.
PARA QUIEN QUIERA INVESTIGAR
Para quien quiera investigar y profundizar en el api drag and drop citamos algunos elementos relevantes que deberían estudiarse con detenimiento para el correcto manejo de esta api:
a) Eventos dragstart, drag, dragend, dragenter, dragover, drop, dragleave.
b) Objeto dataTransfer
c) Métodos setData, getData, clearData y setDragImage.
d) Propiedades types, files, dropEffect, effectAllowed.
EJERCICIO OPCIONAL
Este ejercicio no forma parte del curso, por eso se califica como opcional. El ejercicio consiste en partir de una imagen cuadrada y crear a partir de ella cuatro imágenes de igual tamaño que serían las piezas del puzzle. A la izquierda de la pantalla deben mostrarse las cuatro imágenes en orden aleatorio (puzzle desordenado). A la derecha de la pantalla debe verse un cuadrado con los cuatro bordes de las piezas del puzzle. El usuario deberá arrastrar cada pieza del puzzle a su posición correcta. Cuando el puzzle esté correctamente construido debe aparecer el mensaje: ¡Enhorabuena: puzzle correctamente construido!
Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
