Arrastrar y Soltar

Arrastrar y Soltar

Recursos:

• W3 Schools
• W3C

Se puede aplicar en HTML5  mediante unos atributos de arrastrar y soltar: Se distinguen dos tipos de atributos:

Atributos sobre el elemento contenedor:

• ondragenter: evento que ocurre cuando sobre este elemento se arrastre un elemento.
• ondragover: evento que ocurre cuando el usuario está moviendo el elemento arrastrable sobre este elemento contenedor
• ondrop: evento que ocurre cuando se suelta un elemento arrastrable sobre el elemento contenedor.

Atributos sobre el elemento arrastrable:

• draggable: permite que un elemento pueda ser arrastrado: Se le pasa un valor booleando (true o false)
• ondragstart:: ocurre cuando se empieza a mover el elemento arrstrable
• ondragend: ocurre cuando se termina de mover el elemento arrastrable

Hay que asignar cada uno de estos atributos a una función javascript. Por ejemplo:

ondragstart = "return start(event)";

Script:

function start(e) {..}

Interface  Datatransfer: es un conjunto de objetos incluidos en los eventos de HTML5 y son los encargados de ofrecer el soporte para las operaciones de drag and drop.Se accede a través del objeto event. Propiedades y funcines:

• effectAlloved: nos indica que operaciones de arrastrar y soltar van a estar permitidas
• setData(): Especificamos los datos que queremos arrastrar y soltar
• getData(): Especificamos los datos que queremos arrastrar y soltar
• setDragImage(): Especificamos la imagen del item que está siendo arrastrado para que cuando nos movamos parezca que estamos moviendo también la imagen.

Ejemplo de función sobre un elemento arrastrable:

e.datatransfer.effectAllowed = 'move'; //permite mover el elementoe.dataTransfer.setData("Data",e.target.getAttriburtte('id'));e.dataTransfer.setDragImage(e.target,0,0)return true;

Ejemplo de función sobre elemento contenedor:

return true; //permite que el elemento pueda contener otro elemento

Para indicar si un elemento en concreto pueda ser arrastrado al elemento contenedor se utilizan las condicionales

var esarrastrable = e.dataTransfer.getData("Data"); //averiguaos el elemetno contenedor destinovar id = e.target.getAttribute('id'); //averigualmos que elemento arrastrable se está moviendo

Se utiliza true y false para determinar si cierto elemento se puede soltar sobre el contenedor

• False: se puede soltar.
• True: no se puede soltar.

if (id == "destino1") {return false} //cualquiera puede arrastrarse a destino 1if (id == 'destino2') && esarrastable == 'arrastrable3') return false //se puede soltar sobre destino 2 el elemento arrastable3

appendChild(): nos permite añadir el elemento arrastrable al elemento destino cuando se suelta el elemento (evento ondrop)

var esarrastrable = e.dataTransfer.getData("Data"); //averiguaos el elemetno contenedor destinoe.target.appendChild(document.getElementById(esarrastable));e.stopPropagation; //evita que se repita el evento en el navegador y el elemento se queda fijado en el elemento contenedorretur false;

Cuando se termina de arrastar el elemento (evento ondragend), se ha de limpiar los datos almacenados en el objeto dataTransfer que es el id del elemento arrastrado:

e.dataTransfer.clearData("Data");return true