289
HTML5
Seguramente, el lector recordará el atributo draggable introducido en HTML5. Una condición para que un elemento pueda ser arrastrado es que tenga este atributo colocado en true (desde el marcado o por medio de la manipulación del DOM). Luego, lo que necesitaremos, además del objeto para arrastrar, es otro que actúe como posible destino. Los eventos relacionados con Drag & Drop son:
• • • • •
dragstart: es el comienzo de la operación de arrastrar. drag: ocurre cuando se está arrastrando el elemento con el mouse. dragenter: sin ser soltado, el elemento se coloca dentro del destino. dragover: ocurre cuando el elemento es pasado por encima del destino. dragleave: ocurre cuando el elemento que estamos arastrando es soltado fuera del elemento receptor.
• drop: tengamos en cuenta que se produce cuando el elemento arrastrado se suelta sobre el destino correspondiente.
• dragend: ocurre cuando el evento que estamos arrastrando se concluye, finalizando la acción. Además de arrastrar elementos que forman parte del DOM, también es importante señalar que es posible transferir la información que contiene el elemento arrastrado a su destino, tanto sea en el mismo documento como desde otra ventana. Esto se puede realizar empleando el objeto dataTransfer, que puede trabajar con los métodos setData (nos permite acceder a setear la información) y getData (se encarga de obtener la información correspondiente). Entre el tipo de información que podemos manejar se encuentran las opciones de texto, links, HTML o XML, imágenes y también archivos, entre otras interesantes opciones. A continuación, en el código que mostramos, veremos un ejemplo con el tipo texto trabajando con setData: event.dataTransfer.setData(“text/plain”, “Texto que se va a arrastrar”) Otra característica interesante es la que nos brinda setDragImage, un método que nos permite establecer qué imagen se mostrará cuando estamos arrastrando. También es posible establecer efectos de arrastrado, tanto para el elemento que se va a arrastrar, como para el que lo puede recibir; estas propiedades son effectAllowed y dropEffect, ambas trabajan con el objeto dataTransfer.
www.redusers.com
08_HTML5__PARA REAJUSTAR_OK.indd 289
28/07/2011 06:50:23 p.m.