viernes, 15 de febrero de 2013

DRAG & DROP con HTML5



Hacer un drag & drop ahora es posible a través de HTML5, mediante los nuevos atributos que incluye esta nueva versión, se puede interactuar a través de Javascript para desplazar objetos a un contenedor determinado, o contenedores.

Los atributos y eventos que interactuan con javascript son los siguientes ...

draggable -> true | false //El elemento puede ser movido o desplazado.
ondragstart -> recibe la función que permite transferir la información del elemento draggable a un elemento droppable cuando este es movido.
ondrop -> Determina que este elemento puede recibir la información de un elemento draggable.
ondragover -> Evento que permite recibir al elemento draggable cuando este se encuentra sobre él.


Drag & Drop HTML5. Mueve la imagen al contenedor vacío y viceversa:



El código del ejemplo drag & drop es el siguiente ...

CSS ... Javascript ... HTML ...