arrastar e soltar
é possível alterar a ordem dos elementos de um documento HTML, usando o Arraste o evento. Abaixo vem um exemplo básico
o design da página
o layout da página para o exemplo a seguir inclui:
uma área divs arrastada.
Todos os divs nesta área têm o atributo draggable = "true". Este é um atributo global que indica que o elemento pode ser arrastado usando a funcionalidade da API de arrastar e soltar (arrastar e soltar)
Zonas de liberação
As zonas soltas são elementos HTML (divs neste caso) onde o usuário pode soltar os elementos arrastados.
Eventos usados
O evento drag é acionado com uma freqüência muito alta, enquanto um elemento HTML é acionado pelo usuário
document.addEventListener("drag", function( event ) { //........}, false); o evento dragstart brota quando começamos a arrastar.
O objeto DataTransfer é usado para salvar informações sobre o objeto arrastado. Usamos DataTransfer.setData() para definir o valor desses dados.
document.addEventListener("dragstart", function( event ) { // guarda información acerca del objeto arrastrado event.dataTransfer.setData('text/plain',null) // guarda una referéncia del elemento arrastrado elemenyoArrastrado = event.target; // . . . . más cosas }, false); O evento dragend é acionado no final quando solomi a unidade.
document.addEventListener("dragend", function( event ) { //. . . . . }, false);O evento
div id = “8d206fbdad”>
dispara quando o mouse que arrasta um item está acima de uma zona relese. É importante impedir o comportamento padrão do elemento arrastado, que é retornar ao seu site.
document.addEventListener("dragover", function( event ) { // previene el comportamiento por defecto del elemento arrastrado event.preventDefault(); }, false); o evento dragenter Brota quando o mouse que arrasta um item entra na zona de Relertal.
O evento dragleave é acionado quando o mouse que arrasta um item deixa a zona de queda.
document.addEventListener("dragleave", function( event ) { // comprueba si el event.target es una zona de soltar if ( event.target.className == "zona-de-soltar" ) { // y si lo és, reestablece el valor inicial event.target.style.background = ""; } }, false); O evento drop é acionado liberando o elemento arrastado em uma zona relese
Se o item arrastado é um link, ele será aberto em uma página nove. O mesmo acontece se o elemento arrastado é uma imagem (não uma div com uma imagem). Para que isso não aconteça, temos que usar event.preventDefault();
document.addEventListener("drop", function( event ) { // Si el elemento arrastrado es un link, este se abre en una nueve página. // Para que esto no pase hay que utilizar: á event.preventDefault(); // comprueba si el event.target es una zona de soltar if ( event.target.className == "zona-de-soltar" ) { // reestablece el valor inicial para el background event.target.style.background = ""; // elimina el elemento arrastrado del del elemento padre elementoArrastrado.parentNode.removeChild( elementoArrastrado ); // y lo agrega al elemento de destino event.target.appendChild( elementoArrastrado ); } }, false);veja este Exemplo em Codepen:
veja o garfo de arrasto da caneta por Gabi (@enxaneta) na codepen.