Una de las novedades de HTML5, aunque en internet explorer no fuinciona demasiado bien, es la funcionalidad de drag and drop. Aunque esta funcionalidad ya estaba implementada en javascript hace ya tiempo.
Para hacer que un elemento html de nuestra página web se pueda arrastrar tiene que tener los siguientes atributos:

• draggable: Si es true el elemento se puede arrastrar, si es false o se omite no se puede mover el elemento.
• ondragstart: Con este atributo indicamos que la acción que se llevará a cabo cuando se empiece a arrastar el elemento.
• ondragend: Con este atributo indicamos que la acción que se llevará a cabo cuando se termine de arrastar el elemento (cuando se suelte).

Para hacer que un elemento html de nuestra página web pueda contener elementos que se han arrastrado tiene que tener los siguientes atributos:

• ondragenter: Con este atributo indicamos que la acción que se llevará a cabo cuando un elemento arrastrable entre dentro del elemento destino.
• ondragover: Con este atributo indicamos que la acción que se llevará a cabo cuando un elemento arrastrable este sobre el elemento. En esta función es donde se indica que elementos arrastrables se pueden soltar aquí.
• ondragleave:on este atributo indicamos que la acción que se llevará a cabo cuando un elemento arrastrable deje de estar encima del elemento destino.
• ondrop:on este atributo indicamos que la acción que se llevará a cabo cuando se suelte un elemento arrastrable sobre el elemento destino.

A mi me parece muy útil sobre todo para cuando se quieren subir archivos al servidor ya que es más sencillo que tener el campo input file y tener que tener que estar buscando y seleccionando el fichero con la interfaz de cada navegador.

Compartir en twitter