arrastar e soltar no HTML5 (arrastar e soltar HTML5)

Este é um dos novos recursos adicionados no HTML5, embora já possa ser feito arrastar e A queda através de outras técnicas, agora sendo incluídas no HTML5, o funciona “supostamente” em todos os navegadores, embora se eles não atenderem aos padrões, pois é o caso do Internet Explorer, você encontrará você, em princípio, não funciona.

Para explicar esses novos recursos, vou servir como 2 exemplos simples. No primeiro, vamos ver como arrastar e soltar itens, clonar eles ou excluí-los, e no segundo um simples quebra-cabeça de 4 peças.

para que ele possa ser arrastado e soltou um elemento, dois tipos de elementos, um elemento DRAGRable (que é conseguido adicionando pelo menos os atributos arrastados = “true” e ondragstart = “la_funcion_que_sea (evento)”) e um elemento no qual ele pode ser liberado para o qual o meu mínimo você tem que colocar Ondragover = “retorno la_funcion_que_sea (evento)” e ondrop = “return la_funcion_que_sea (evento)”.

Exemplo 1 de arrastar e soltar com HTML5: arrastar e soltar, clonar e excluir elementos

No exemplo a seguir, os elementos DRAGRable1,2,3 e 4 são arrastados e na caixa de elementos1,2,3 e nos elementos de lixo podem ser liberados.

<!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>

vamos explicar brevemente para que seja cada atributo do elemento arrastado:

  • draggable: Se for verdade, ele pode ser arrastado, se for falso ou omitir, não pode ser Veja o elemento.
  • ondragstart: aqui a ação que ocorrerá será indicada quando você começar a arrastar o item.
  • ondragend: aqui a ação que ocorrerá quando terminar arrastar o elemento (quando lançado).

e para o elemento que pode ser arrastado são estes:

  • ondraracenter: aqui a ação que ocorrerá quando um Elemento arrastado entre o elemento.
  • ondragover: aqui a ação que será realizada quando um elemento arrastando estiver no elemento. Nesta função é onde é indicado que os elementos arrastados podem ser liberados aqui.
  • ondragleave: aqui a ação que será realizada quando um elemento de arrasto parar de estar no topo do elemento.
  • ONDROP: Aqui a ação que ocorrerá será indicada quando um elemento arrastado no elemento for liberado.

Uma vez visto o código HTML necessário para arrastar e soltar itens que vai ver a parte de JavaScript. Começamos pelas funções do elemento arrastado.

A primeira ação que ocorre é acionada dentro do 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 função define nesta função O modo em que o item será arrastado (Nenhum, copiar, copylink, copymove, link, linkmove, mover ou todos) em efreallowed, o item é definido para ser arrastado e o modo em que você vai salvar esta informação Com SetData (formato, elemento) e você também pode substituir a imagem do elemento quando estiver arrastando para substituir o que o navegador usa por padrão (o elemento com um certo grau de transparência) pela imagem (ou o elemento) indicado e as coordenadas do elemento através do qual o elemento foi arrastado. Destas três funções apenas SetData é obrigatória. Além dessas funções na função acima, a opacidade do elemento que é alterada é modificada para que pareça um pouco transparente e o elemento que está sendo arrastado é melhor.

Quando estiver concluído Arraste um elemento As informações associadas ao elemento DatarTransfer são eliminadas pela SetData com o método ClearData e, como estiver no início para arrastar o item, a opacidade do elemento é alterada para o seu estado original.

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

Agora vamos ver as funções executadas quando os eventos do elemento do contêiner são produzidos:

As funções que são executadas nos eventos OneDragenter e OneDableave podem ser usadas para Exemplo para alterar a aparência quando um elemento arrastado do elemento chegar ou sair, neste exemplo, uma borda pontilhada cinza é colocada quando um elemento de arrasto passa e remove a borda quando sai.

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

quando um Elemento arrastado sobre um elemento em que você ‘pode’ queda é executado o evento ondragover do qual ele é chamado de seguinte função:

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 mais importante deste A função é o que retorna, se você puder soltar o item retornos false (se, não for um erro, ele retornará false se você puder ser liberado) e verdadeiro caso contrário.

Para indicar que os itens podem ser liberados e onde podem ser lançados na linha 2, o elemento é obtido e no 3 o ID do elemento no qual ele está arrastando e combinando ambos pode estar recebendo que nem todos Os elementos podem ser liberados em todos os “contêineres”.

A seguinte função permite que o elemento seja colocado na posição exata na qual é liberado. Com linhas 2 e 3, o elemento arrastado já estaria dentro do elemento “contêiner”, mas para ser colocado na posição exata que queremos ser usados pelo posicionamento absoluto, por isso temos que tirar as coordenadas em que o elemento (linhas 14 e 15), mas se for liberado em uma borda do “contêiner”, pode ser que parte do elemento arrastado esteja fora do contêiner, que não é muito estética para que as coordenadas do recipiente e do tamanho do Contêiner e o elemento arrastado para saber se o elemento está fora ou dentro e se resta corrigir a posição para que esteja dentro. (Ele só é verificado que não sai à direita e abaixo porque, como em setdragimage, as coordenadas foram 0,0 não podem sair acima ou à esquerda.) Na última linha da função, a borda do estado original é restaurada Isso foi alterado na função Inserir.

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 

com arrastar e soltar, você também pode clonar elementos de uma maneira muito simples. O elemento arrastado é obtido na primeira linha para ser capaz de copiá-lo e o próximo é restaurado para que o elemento clonado tenha a opacidade original. Em seguida, o elemento é clonado e o ID é alterado para o elemento clonado para ser exclusivo com um nome e um contador que será uma variável global (uma variável fora das funções) para que ela não seja repetida e adicionada ao elemento do qual É chamado essa função (no caso deste exemplo desenhado3).

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 para terminar este exemplo, vamos com o código da função para remover rigor de elementos. Esta função é muito simples, tudo o que deve ser levado em conta é que para excluir um item que você tem que fazê-lo do elemento pai, mas graças ao uso do parentnode você só precisa do elemento que deseja excluir.

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}

Aqui você pode ver o exemplo completo em operação:

Veja o exemplo de caneta Arrastar & Drop em HTML5 por Quartos Ivan (@ ISC7) em Codepen

Exemplo 2 de arrastar e soltar com HTML5: um quebra-cabeça

Este exemplo é bastante simples e acima de tudo, se você já viu anteriormente o Exemplo anterior em que explicar os diferentes aspectos do arrastar & Gota com HTML5.

O código é muito semelhante ao do exemplo anterior, o HTML é analógico Mas como desta vez o objetivo é fazer um quebra-cabeça há um recipiente inicial em que as peças do quebra-cabeça e outro contêiner onde o quebra-cabeça será feito que tenha quatro outros contêineres um para cada peça.

e como para funções de JavaScript, há também muito para comentar, apenas na função de queda a primeira linha deve ser e.PreventDefault (); Para evitar que ele acesse as peças que são imagens, a ação padrão do navegador ocorre (que será a imagem) e, assim, funciona tudo é esperado.

/** * 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 terminar de comentar na função de verificação que simplesmente verifica se cada peça está na posição e, em caso afirmativo, indique com uma mensagem. Esta função deve ser chamada de cada vez que uma peça é colocada pelo que é chamado da função de queda.

e finalmente o quebra-cabeça para que você possa vê-lo:

Veja o arrasto da caneta DIV ID = “78D4517F23”> Drop HTML5 por Ivan Salas (@ isc7) no codepen

Aqui você pode baixar o código dos dois exemplos.

4 Compartilhar

Leave a Comment

O seu endereço de email não será publicado. Campos obrigatórios marcados com *