Arrastrar e soltar en HTML5 (Drag & Dropt HTML5)

Esta é unha das novas funcións engadidas en HTML5, aínda que xa se pode facer arrastrar e Drop a través de outras técnicas, agora sendo incluído en HTML5 fai que sexa “supostamente” traballar en todos os navegadores, aínda que se non cumpren os estándares, xa que é o caso de Internet Explorer, atoparás en principio que non funciona.

Para explicar estas novas características que vou servir como 2 exemplos sinxelos. No primeiro, veremos como arrastrar e soltar elementos, clonalos ou borralos e, no segundo, un sinxelo puzzle de 4 pezas.

Para que poida ser arrastrado e deixou caer un elemento, dous tipos de elementos, un elemento Dragrable (que se logra engadindo polo menos os atributos draggables = “true” e ondragstart = “la_funcion_que_sea (evento)”) e un elemento no que se pode liberar ao que o meu mínimo ten que poñer Ondragover = “devolver la_funcion_que_sea (evento)” e ondrop = “devolver la_funcion_que_sea (evento)”.

Exemplo 1 de arrastrar e soltar con HTML5: arrastrar e soltar, clonar e eliminar elementos

No seguinte exemplo os elementos dragables1,2,3 e 4 son arrastrados e sobre os elementos Box1,2,3 e nos elementos de lixo pódese liberar.

<!DOCTYPE html><html land="es"><head> <meta charset="utf-8" /> <title>Drag & drop</title> <link rel="stylesheet" type="text/css" href="estilo.css"> <script type="text/javascript"> //... </script></head><body> <header> <h1> Un ejemplo del uso de Drag & Drop en HTML5 </h1> </header> <section> <div ondragenter="return enter(event)" ondragover="return over(event)" ondragleave="return leave(event)" ondrop="return drop(event)"> <div class="cuadradito" draggable="true" ondragstart="start(event)" ondragend="end(event)"> 1 </div> <div class="cuadradito" draggable="true" ondragstart="start(event)" ondragend="end(event)"> 2 </div> <div class="cuadradito" draggable="true" ondragstart="start(event)" ondragend="end(event)"> 3 </div> </div> <div ondragenter="return enter(event)" ondragover="return over(event)" ondragleave="return leave(event)" ondrop="return drop(event)"> </div> <div ondragenter="return enter(event)" ondragover="return over(event)" ondragleave="return leave(event)" ondrop="return clonar(event)"> Clonadora </div> <div ondragenter="return enter(event)" ondragover="return over(event)" ondragleave="return leave(event)" ondrop="return eliminar(event)">Papelera</div> </section></body></html>

explicaremos brevemente para que sexa cada atributo do elemento arrastrado:

  • Draggable: se é certo, pode ser arrastrado, se é falso ou omite que non pode ser Vexa o elemento.
  • ondragstart: aquí a acción que terá lugar será indicada cando comeza a arrastrar o elemento.
  • ondragend: Aquí a acción que terá lugar cando finaliza o arrastre o elemento (cando se publica).

e para o elemento que se pode arrastrar son estes:

  • ondraracenter: Aquí a acción que terá lugar cando a Elemento arrastrado entre o elemento.
  • ondragover: Aquí a acción que se levará a cabo cando un elemento de arrastre está no elemento. Nesta función é onde se indica que os elementos arrastrados poden ser liberados aquí.
  • ondragleave: Aquí a acción que se levará a cabo cando un elemento de arrastre deixa de estar na parte superior do elemento.
  • Ondrop: Aquí a acción que terá lugar será indicada cando un elemento arrastrado no elemento é liberado.

Unha vez visto cal é o código HTML necesario para arrastrar e soltar elementos que nós Vai ver a parte de JavaScript. Comezamos polas funcións do elemento arrastrado.

A primeira acción que se produce desencadeada dentro de Ondragstart:

function start(e) { e.dataTransfer.effecAllowed = 'move'; // Define el efecto como mover e.dataTransfer.setData("Data", e.target.id); // Coje el elemento que se va a mover e.dataTransfer.setDragImage(e.target, 0, 0); // Define la imagen que se vera al ser arrastrado el elemento y por donde se coje el elemento que se va a mover (el raton aparece en la esquina sup_izq con 0,0) e.target.style.opacity = '0.4'; // Establece la opacidad del elemento que se va arrastrar}

Nesta función defínese O modo en que se arrastrará o elemento (ningún, copia, copylink, copymove, ligazón, ligazón, movemento ou todo) en EffAllado, o elemento está configurado para ser arrastrado e o modo en que vai gardar esta información Con setData (formato, elemento) e tamén pode substituír a imaxe do elemento cando está arrastrando para substituír o que o navegador usa por defecto (o elemento con certo grao de transparencia) pola imaxe (ou o elemento) indicado e as coordenadas do elemento a través do cal o elemento foi arrastrado. Das tres funcións só o setdata é obrigatorio. Ademais destas funcións na función anterior, a opacidade do elemento que está arrastrada é modificada para que se vexa un pouco transparente e o elemento que está a ser arrastrado é mellor.

cando remate de arrastrar un elemento A información asociada ao elemento DataRtransfer é eliminada por SETDATA co método ClearData e como cando comeza a arrastrar o elemento, a opacidade do elemento cambia ao seu estado orixinal.

function end(e) { e.target.style.opacity = ''; // Restaura la opacidad del elemento e.dataTransfer.clearData("Data");}

Agora imos ver as funcións que se executan cando se producen os eventos do elemento de contedores:

As funcións que se executan nos eventos de ondragenter e ondable Exemplo para cambiar a aparencia cando un elemento arrastrado do elemento entra ou sae, neste exemplo colócase un borde de punto gris cando un elemento de arrastre pasa e elimina o bordo cando sae.

function enter(e) { e.target.style.border = '3px dotted #555'; }function leave(e) { e.target.style.border = ''; }

cando un Elemento arrastrado por un elemento no que a caída “pode” executarse o evento de ondragover desde o que se chama a seguinte función:

function over(e) { var elemArrastrable = e.dataTransfer.getData("Data"); // Elemento arrastrado var id = e.target.id; // Elemento sobre el que se arrastra // return false para que se pueda soltar if (id == 'cuadro1') { return false; // Cualquier elemento se puede soltar sobre el div destino 1 } if ((id == 'cuadro2') && (elemArrastrable != 'arrastrable3')) { return false; // En el cuadro2 se puede soltar cualquier elemento menos el elemento con id=arrastrable3 } if (id == 'cuadro3') { return false; } if (id == 'papelera') { return false; // Cualquier elemento se puede soltar en la papelera } }

O máis importante deste A función é o que devolve, se pode liberar o elemento devolve falso (se non é un erro, devolve falso se pode ser lanzado) e verdadeiro doutro xeito.

Para indicar que os elementos poden ser liberados e onde se poden publicar na liña 2 obtense o elemento e no 3 o ID do elemento no que está arrastrando e combinando ambos poden ser que non todos Os elementos pódense liberar en todos os “contedores”.

A seguinte función permite que o elemento se coloque na posición exacta na que se libera. Con liñas 2 e 3, o elemento arrastrado xa estaría dentro do elemento “Contedor”, pero para ser colocado na posición exacta que queremos ser utilizados polo posicionamento absoluto, polo que temos que sacar as coordenadas en que o elemento (liñas) 14 e 15), pero se se libera nun bordo do “recipiente” pode ser que parte do elemento arrastrado está fóra do recipiente, que non é moi estético para que as coordenadas do recipiente e o tamaño do Contedor e o elemento arrastrado para saber se o elemento está fóra ou dentro e se queda para corrixir a posición para que estea dentro. (Só se comproba que non sae á dereita e por debaixo porque como en setdragimage as coordenadas foron 0,0 non pode saír arriba ou á esquerda) na última liña da función, o bordo do estado orixinal é restaurado Que se cambiou na función de entrada.

function drop(e) { var elementoArrastrado = e.dataTransfer.getData("Data"); // Elemento arrastrado e.target.appendChild(document.getElementById(elementoArrastrado)); // Añade el elemento arrastrado al elemento desde el que se llama a esta funcion // Dimensiones del elemento sobre el que se arrastra tamContX = $('#'+e.target.id).width(); tamContY = $('#'+e.target.id).height(); // Dimensiones del elemento arrastrado tamElemX = $('#'+elementoArrastrado).width(); tamElemY = $('#'+elementoArrastrado).height(); // Posicion del elemento sobre el que se arrastra posXCont = $(e.target).position().left; posYCont = $(e.target).position().top; // Posicion absoluta del raton x = e.layerX; y = e.layerY; // Si parte del elemento que se quiere mover se queda fuera se cambia las coordenadas para que no sea asi if (posXCont + tamContX 

con arrastrar e soltar tamén pode clonar elementos dun xeito moi sinxelo. O elemento arrastrado obtense na primeira liña para poder copialo e o seguinte é restaurado para que o elemento clonado teña a opacidade orixinal. A continuación, o elemento está clonado e a ID cambia ao elemento clonado para ser único cun nome e un contador que será unha variable global (unha variable fóra das funcións) para que non se repita e engada ao elemento Chámase esta función (no caso deste exemplo DRAWN3).

function clonar(e) { var elementoArrastrado = document.getElementById(e.dataTransfer.getData("Data")); // Elemento arrastrado elementoArrastrado.style.opacity = ''; // Dejamos la opacidad a su estado anterior para copiar el elemento igual que era antes var movecarclone = elementoArrastrado.cloneNode(true); // Se clona el elemento movecarclone.id = "ElemClonado" + contador; // Se cambia el id porque tiene que ser unico contador += 1; elementoClonado.style.position = "static"; // Se posiciona de forma "normal" (Sino habria que cambiar las coordenadas de la posición) e.target.appendChild(movecarclone); // Se añade el elemento clonado e.target.style.border = ''; // Quita el borde del "cuadro clonador"}

e rematar este exemplo, imos co código da función para eliminar Elementos Crag. Esta función é moi sinxela, todo o que hai que ter en conta é que para eliminar un elemento que ten que facelo desde o seu elemento pai, pero grazas ao uso do parentNode só precisa do elemento que desexa eliminar.

function eliminar(e) { var elementoArrastrado = document.getElementById(e.dataTransfer.getData("Data")); // Elemento arrastrado elementoArrastrado.parentNode.removeChild(elementoArrastrado); // Elimina el elemento e.target.style.border = ''; // Quita el borde}

Aquí podes ver o exemplo completo en funcionamento:

Ver o exemplo de pluma arrastrar & en HTML5 por Ivan Rooms (@ isc7) en Codepen

Exemplo 2 de arrastrar e soltar con HTML5: un puzzle

Este exemplo é moi sinxelo e sobre todo se xa viu o Exemplo anterior no que explicar os diferentes aspectos do arrastre & con HTML5.

O código é moi similar ao do exemplo anterior, o HTML é analóxico pero sempre que esta vez o obxectivo é facer un puzzle non é un recipiente de inicio na que as pezas do puzzle e outro recipiente onde o puzzle vai ser feito que ten catro outros recipientes un para cada peza.

e en canto ás funcións de JavaScript tamén hai moito que comentar, só na función de caída a primeira liña ten que ser E.Preventdefault (); Para evitar que deixes de deixar as pezas que son imaxes, ocorre a acción predeterminada do navegador (que será a imaxe) e así traballar todo é que se esperaba.

/** * Función que se ejecuta al arrastrar el elemento. */function start(e) { e.dataTransfer.effecAllowed = 'move'; // Define el efecto como mover (Es el por defecto) e.dataTransfer.setData("Text", e.target.id); // Coje el elemento que se va a mover e.target.style.opacity = '0.4';}/** * Función que se ejecuta se termina de arrastrar el elemento. */function end(e){ e.target.style.opacity = ''; // Restaura la opacidad del elemento e.dataTransfer.clearData("Data"); }/** * Función que se ejecuta cuando un elemento arrastrable entra en el elemento desde del que se llama. */function enter(e) { return true;}/** * Función que se ejecuta cuando un elemento arrastrable esta sobre el elemento desde del que se llama. * Devuelve false si el objeto se puede soltar en ese elemento y true en caso contrario. */function over(e) { if ((e.target.className == "contenedorPieza") || (e.target.id == "contenedorPiezas")) { return false; } else { return true; }} /** * Función que se ejecuta cuando un elemento arrastrable se suelta sobre el elemento desde del que se llama. */function drop(e) { e.preventDefault(); // Evita que se ejecute la accion por defecto del elemento soltado. var elementoArrastrado = e.dataTransfer.getData("Text"); e.target.appendChild(document.getElementById(elementoArrastrado)); // Coloca el elemento soltado sobre el elemento desde el que se llamo esta funcion comprobarPuzzle();}function comprobarPuzzle(){ if ((document.getElementById('pieza1').parentNode.id=='uno') && (document.getElementById('pieza2').parentNode.id=='dos') && (document.getElementById('pieza3').parentNode.id=='tres') && (document.getElementById('pieza4').parentNode.id=='cuatro')) { alert('Felicidades, has hecho un puzzle de 4 piezas xD'); }}

Para rematar comentar a función de verificación que simplemente comproba se cada peza está en posición e se é así que o indica cunha mensaxe. Esta función debe ser chamada cada vez que unha peza está colocada polo que se chama desde a función de caída.

e finalmente o puzzle para que poida ver:

Ver o Pen puzzle arrastre

Drop HTML5 de Ivan Salas (@ isc7) en Codepen

Aquí pode descargar o código dos dous exemplos.

4 Compartir

Leave a Comment

O teu enderezo electrónico non se publicará Os campos obrigatorios están marcados con *