Drag and Drop On HTML5 (Drag & Drop Html5)

Questa è una delle nuove funzionalità aggiunte in HTML5, anche se potrebbe già essere fatto. Goccia attraverso altre tecniche, ora incluso in HTML5 rende “presumibilmente” lavori su tutti i browser, anche se se non soddisfano gli standard poiché è il caso di Internet Explorer che ti troverai in linea di principio che non funziona.

Per spiegare queste nuove funzionalità, servirò come 2 semplici esempi. Nel primo vedremo come trascinare e rilasciare oggetti, clonilili o eliminarli, e nel secondo puzzle semplice a 4 pezzi.

In modo che possa essere trascinato e caduto un elemento, due tipi di elementi, un elemento dragro (che si ottiene aggiungendo almeno gli attributi trascinabili = “true” e ondragstart = “la_funcion_que_sea (evento)”) e un elemento in cui può essere rilasciato a cui il mio minimo devi indossare Ondragover = “ritorno la_funcion_que_sea (evento)” e ondrop = “return la_funcion_que_sea (evento)”.

Esempio 1 di trascinamento del trascinamento con html5: trascinare, goccia, clone ed elimina elementi

Nell’esempio seguente gli elementi dragari1,2,3 e 4 vengono trascinati e sugli elementi Box1,2,3 e sugli elementi di rifiuti possono essere rilasciati.

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

Ti spiegheremo brevemente in modo da ciascun attributo dell’elemento trascinato:

  • trascinabile: se è vero, può essere trascinato, se è falso o omesso non può essere Vedere l’elemento.
  • ondragstart: qui l’azione che avverrà verrà indicata quando si avvia per trascinare l’oggetto.
  • ondragend: qui l’azione che si svolgerà quando terminali L’elemento (quando rilasciato).

E per l’elemento che può essere trascinato sono questi:

  • ondraracenter: qui l’azione che avverrà quando A Elemento trascinato tra l’elemento.
  • ondrager: qui l’azione che verrà eseguita quando un elemento di trascinamento è sull’elemento. In questa funzione è dove è indicato che gli elementi trascinati possono essere rilasciati qui.
  • ondragleave: qui l’azione che verrà eseguita quando un elemento di trascinamento smette di essere in cima all’elemento.
  • ondrop: qui l’azione che avverrà verrà indicata quando viene rilasciato un elemento trascinato sull’elemento.

Una volta visto come è il codice HTML necessario per trascinare e rilasciare gli elementi noi sta per vedere la parte di JavaScript. Abbiamo iniziato dalle funzioni dell’elemento trascinato.

La prima azione che si verifica viene attivata all’interno di 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}

In questa funzione definisce La modalità in cui verrà trascinato l’articolo (nessuno, copia, copilink, copymove, link, linkmuove, sposta o tutto) in Effallowed, l’elemento è impostato per essere trascinato e la modalità in cui si salva queste informazioni Con SetData (formato, elementato) e puoi anche sostituire l’immagine dell’elemento quando si sta trascinando per sostituire quello che il browser utilizza per impostazione predefinita (l’elemento con un certo grado di trasparenza) da parte dell’immagine (o dell’elemento) indicata e le coordinate dell’elemento attraverso il quale l’elemento è stato trascinato. Di queste tre funzioni solo SetData è obbligatoria. Oltre a queste funzioni nella funzione di cui sopra, l’opacità dell’elemento trainata viene modificata in modo che sia un po ‘trasparente e l’elemento che viene trascinato è migliore.

Quando è finito di trascinare un Elemento Le informazioni associate all’elemento DatarTransfer vengono eliminate da SetData con il metodo ClearData e come quando si inizia a trascinare l’elemento, l’opacità dell’elemento viene modificata nel suo stato originale.

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

Ora vedremo le funzioni che vengono eseguite quando vengono prodotte gli eventi dell’elemento contenitore:

Le funzioni eseguite negli eventi ondragenter e ondrableave possono essere utilizzate per Esempio Per modificare l’aspetto Quando viene eseguito o si accende un elemento trascinato dell’elemento, in questo esempio viene posizionato un bordo punteggiato grigio quando viene posizionato un elemento di trascinamento e rimuove il bordo quando si esce.

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

quando un Elemento trascinato su un elemento in cui “Can ‘Drops viene eseguito l’evento ondrager da cui è chiamato la seguente funzione:

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

il più importante da questo La funzione è ciò che ritorna, se è possibile rilasciare la voce restituisce false (se, non è un errore, restituisce false se si può essere rilasciata) e true altrimenti.

Per indicare che gli articoli possono essere rilasciati e dove possono essere rilasciati sulla riga 2 L’elemento è ottenuto e nel 3 l’ID dell’elemento su cui si sta trascinando e la combinazione di entrambi può essere ottenuto non tutto Gli elementi possono essere rilasciati in tutti i “contenitori”.

La seguente funzione consente all’elemento di essere posizionato nella posizione esatta in cui viene rilasciato. Con linee 2 e 3 L’elemento trascinato sarebbe già all’interno dell’elemento “Contenitore”, ma da posizionare nella posizione esatta che vogliamo essere utilizzata dal posizionamento assoluto, quindi dobbiamo togliere le coordinate in cui l’elemento (linee 14 e 15), ma se viene rilasciato su un bordo del “contenitore” potrebbe essere che parte dell’elemento trascinato è fuori dal contenitore, che non è molto estetico in modo che le coordinate del contenitore e della dimensione del Contenitore e l’elemento trascinato per sapere se l’elemento è all’esterno o all’interno e se rimane per correggere la posizione in modo che sia all’interno. (Viene controllato solo che non si verifichi sulla destra e sotto perché come in setdragimage le coordinate erano 0.0 non possono uscire sopra o sulla sinistra.) Nell’ultima riga della funzione viene ripristinato il bordo allo stato originale Che era stato cambiato nella funzione ENTER.

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 Drag and Drop puoi anche clonare gli elementi in modo molto semplice. L’elemento trascinato è ottenuto nella prima riga per essere in grado di copiarlo e quello successivo viene ripristinato in modo che l’elemento clonato abbia l’opacità originale. Quindi l’elemento è clonato e l’ID viene modificato nell’elemento clonato per essere univoco con un nome e un contatore che sarà una variabile globale (una variabile fuori dalle funzioni) in modo che non sia ripetuto e aggiunto all’elemento da cui Si chiama questa funzione (nel caso di questo esempio disegnato 3).

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 per completare questo esempio, andiamo con il codice della funzione da rimuovere Elements Crag. Questa funzione è molto semplice, tutto ciò che deve essere preso in considerazione è che per eliminare un oggetto devi farlo dal tuo elemento genitore ma grazie all’utilizzo del ParentNode hai solo bisogno dell’elemento che si desidera eliminare.

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}

Qui puoi vedere l’intero esempio in funzione:

Vedi l’esempio della penna Drag & DROP in HTML5 di Ivan Rooms (@ ISC7) su Codepen

Esempio 2 di Drag and Drop con HTML5: un puzzle

Questo esempio è abbastanza semplice e soprattutto se hai visto in precedenza il Esempio precedente in cui spiega i diversi aspetti del drag & Drop con HTML5.

Il codice è molto simile a quello dell’esempio precedente, l’HTML è analogico Ma da quel momento l’obiettivo è quello di creare un puzzle c’è un contenitore iniziale in cui i pezzi del puzzle e un altro contenitore dove verranno fatti il puzzle che ha altri quattro contenitori uno per ogni pezzo.

E come per le funzioni JavaScript c’è anche troppo da commentare, solo nella funzione Drop La prima linea deve essere e.preventDeFault (); Per evitare di lasciare andare i pezzi che sono immagini, si verifica l’azione predefinita del browser (che sarà l’immagine) e quindi il lavoro è da aspettarsi.

/** * 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'); }}

Per completare il commento sulla funzione di controllo che semplicemente controlla se ciascun pezzo è in posizione e, in caso affermativo, si indica con un messaggio. Questa funzione deve essere chiamata ogni volta che un pezzo è posizionato da ciò che viene chiamato dalla funzione di caduta.

E infine il puzzle in modo da poterlo vedere:

Vedi il puzzle della penna Drag & Drop HTML5 di Ivan Salas (@ ISC7) su Codepen

Qui è possibile scaricare il codice dei due esempi.

4 Condividi

Leave a Comment

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *