w3.unpotode (Galego)

arrastrar e soltar

É posible cambiar a orde dos elementos dun documento HTML, usando o Arrastre o evento. Abaixo vén un exemplo básico

o deseño da páxina

O deseño da páxina para o seguinte exemplo inclúe:

unha área de divs arrastrada.

Todas as divs nesta área teñen o atributo draggable = "true". Este é un atributo global que indica que o elemento pode ser arrastrado usando a funcionalidade da API de arrastrar e soltar (arrastrar e soltar)

zonas de liberación

As zonas soltas son elementos HTML (DIVS neste caso) onde o usuario pode deixar caer os elementos arrastrados.

eventos usados

O evento drag desencadea cunha frecuencia moi alta, mentres que un elemento HTML está impulsado polo usuario

document.addEventListener("drag", function( event ) { //........}, false);

O evento dragstart brotes cando comezamos a arrastrar.

O obxecto DataTransfer úsase para gardar información sobre o obxecto arrastrado. Usamos DataTransfer.setData() para configurar o valor destes datos.

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 desencadea ao final cando soltamos a unidade.

document.addEventListener("dragend", function( event ) { //. . . . . }, false);

O evento

DIV id = “8d206fbdad”>

cando o rato que arrastra un elemento está por riba dunha zona relese. É importante evitar o comportamento predeterminado do elemento arrastrado, que é para volver ao seu sitio.

 document.addEventListener("dragover", function( event ) { // previene el comportamiento por defecto del elemento arrastrado event.preventDefault(); }, false);

O evento dragenter Broxe cando o rato que arrastra un elemento entra na zona relertal.

document.addEventListener("dragenter", function( event ) { // comprueba si el event-target es una zona de soltar if ( event.target.className == "zona-de-soltar" ) { // y en este caso cambia el color de fondo event.target.style.background = "purple"; } }, false);

O evento dragleave está activado cando o rato que arrastra un elemento deixa a zona de caída.

 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 é desencadeado lanzando o elemento arrastrado nunha zona relese
se o elemento arrastrado é unha ligazón, ábrese nunha páxina de nove. O mesmo ocorre se o elemento arrastrado é unha imaxe (non unha div cunha imaxe). Para que isto non suceda, 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);

ver isto Exemplo en Codepen:

Ver a bifurcación de arrastre de pluma por Gabi (@enxaneta) en codepen.

Deixa unha resposta

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