Glisare și drop pe HTML5 (drag & drop html5)

Acesta este unul dintre noile caracteristici adăugate în HTML5, deși ar putea fi deja realizat Puneți prin alte tehnici, acum fiind inclusă în HTML5 o face să lucreze „presupus” pe toate browserele, deși dacă nu îndeplinesc standardele, deoarece este cazul de Internet Explorer, vă veți găsi în principiu că nu funcționează.

pentru explicarea acestor noi caracteristici, voi servi ca 2 exemple simple. În primul, vom vedea cum să trageți și să lăsăm elementele, să le clonăm sau să le ștergeți, iar în al doilea un puzzle simplu de 4 piese.

astfel încât să poată fi tras și a scăzut un element, două tipuri de elemente, un element strâns (care se realizează prin adăugarea cel puțin a atributelor dragi = „Adevărat” și ondragstart = „la_funcion_que_sea (eveniment)”) și un element în care poate fi eliberat la care minimul meu trebuie să-l puneți Ondragover = „retur la_funcion_que_sea (eveniment)” și ondrop = „retur la_funciion_que_sea (eveniment) > În exemplul următor, elementele dragrave1,2,3 și 4 sunt trase și pe elementele Box1,2,3 și pe elementele de gunoi pot fi eliberate.

iv id = „7309904801”

Vom explica pe scurt, astfel încât acesta este fiecare atribut al elementului tras:

  • dragabil: Dacă este adevărat, poate fi tras, dacă este fals sau omite nu poate fi Vedeți elementul.
  • Ondragstart: Aici acțiunea care va avea loc va fi indicată atunci când începeți să trageți elementul.
  • Ondragend: Aici acțiunea care va avea loc când se va trage sfârșitul Elementul (atunci când este eliberat).

și pentru elementul care poate fi tras sunt acestea:

  • ondracentor: Aici acțiunea care va avea loc când a Elementul tras între element.
  • Ondragover: Aici acțiunea care va fi efectuată atunci când un element de tragere este pe element. În această funcție este indicat faptul că elementele târzii pot fi eliberate aici.
  • ondragave: aici acțiunea care va fi efectuată atunci când un element de tragere se oprește în partea superioară a elementului.
  • Ondrop: Aici acțiunea care va avea loc va fi indicată atunci când este eliberat un element trasat pe element.

odată văzută care este codul HTML necesar pentru a trage și a scăpa obiecte vor vedea partea lui JavaScript. Am început prin funcțiile elementului tras.

Prima acțiune care apare este declanșată în cadrul 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}

în această funcție definește modul în care elementul va fi tras (niciun, copie, copilink, copymove, link, linkmove, mutare sau toate) în effelicid, elementul este setat pentru a fi tras și modul în care veți salva aceste informații Cu SetData (format, elementat) și puteți înlocui, de asemenea, imaginea elementului atunci când trageți pentru a înlocui unul pe care browserul îl utilizează în mod implicit (elementul cu un anumit grad de transparență) de imaginea (sau elementul) indicat și coordonatele elementului prin care elementul a fost târât. Dintre aceste trei funcții, numai setdata este obligatorie. În plus față de aceste funcții în funcția de mai sus, opacitatea elementului care este trasă este modificată astfel încât să pară un pic transparentă și elementul care este tras este mai bun.

Când este terminat trageți un Element Informațiile asociate cu elementul DaTartransfer sunt eliminate de SetData cu metoda Cleartata și ca în momentul începerii de a trage elementul, opacitatea elementului este schimbată în starea inițială.

DIV id = „EDEC413646”>

Acum vom vedea funcțiile care sunt executate atunci când sunt produse evenimentele elementului de container:

Funcțiile care sunt executate în evenimentele OndraGenter și Ondraborabilave pot fi utilizate pentru Exemplu pentru a schimba aspectul atunci când un element târât al elementului vine sau iese, în acest exemplu o margine gri punctată este plasată atunci când un element de tragere trece și îndepărtează marginea atunci când iese.

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

atunci când a Elementul tras peste un element în care „poate” picătură este executat evenimentul ondragover din care se numește următoarea funcție:

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

cel mai important din acest Funcția este ceea ce returnează, dacă puteți elibera elementul returnează FALSE (dacă nu este o eroare, acesta returnează FALSE dacă puteți fi lansat) și adevărat altfel.

Pentru a indica faptul că elementele pot fi eliberate și unde pot fi eliberate pe linia 2, elementul este obținut și în 3 ID-ul elementului pe care se trage și combinând ambele pot fi obținute la toate acestea Elementele pot fi eliberate în toate „containerele”.

Următoarea funcție permite ca elementul să fie plasat în poziția exactă în care este eliberată. Cu liniile 2 și 3 elementul tras ar fi deja în interiorul elementului „container”, dar pentru a fi plasat în poziția exactă pe care vrem să o folosim prin poziționarea absolută, așa că trebuie să scoatem coordonatele în care elementul (linii 14 și 15), dar dacă este eliberat pe o margine a „containerului”, poate fi faptul că o parte a elementului tras este în afara recipientului, care nu este foarte estetică, astfel încât coordonatele containerului și dimensiunea Container și elementul târât pentru a ști dacă elementul este în afara sau în interior și dacă rămâne să corectați poziția astfel încât să fie înăuntru. (Se verifică doar că nu iese numai pe dreapta și mai jos, deoarece, ca în Setdragimage, coordonatele au fost de 0,0 nu pot ieși deasupra sau în stânga.) În ultima linie a funcției, marginea la starea inițială este restabilită Că a fost schimbată în funcția ENTER.

DIV ID = „F5E5CDBFD5”>

cu drag și picătură puteți, de asemenea, clonează elemente într-un mod foarte simplu. Elementul tras este obținut în prima linie pentru a putea copia acest lucru, iar următoarea este restaurată astfel încât elementul clonat să aibă opacitatea inițială. Apoi, elementul este clonat și ID-ul este schimbat la elementul clonat pentru a fi unic cu un nume și un contor care va fi o variabilă globală (o variabilă din funcții), astfel încât să nu fie repetată și adăugată la elementul din care Se numește această funcție (în cazul acestui exemplu de tras3).

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

și pentru a termina acest exemplu, mergem cu codul funcției de eliminat elemente crag. Această funcție este foarte simplă, tot ce trebuie luată în considerare este că pentru a șterge un element pe care trebuie să-l faceți de la elementul părinte, dar datorită utilizării părintelor de bază, aveți nevoie doar de elementul pe care doriți să îl ștergeți.

iv id = „50669d84e1”

Aici puteți vedea exemplul complet în funcțiune:

Vedeți exemplul stiloului drag & picătură În HTML5 de către Ivan Camere (@ ISC7) pe CodePen

Exemplu 2 de drag și picătură cu HTML5: un puzzle

Acest exemplu este destul de simplu și mai presus de toate dacă ați văzut anterior Exemplul anterior în care explică diferitele aspecte ale tragerii & picătură cu HTML5.

Codul este foarte asemănător cu cel al exemplului anterior, HTML este analogic Dar, din această dată, obiectivul este de a face un puzzle, există un container inițial în care piesele puzzle-ului și un alt recipient unde se va face puzzle-ul care are alte patru containere pentru fiecare bucată.

și ca pentru funcțiile JavaScript există, de asemenea, prea multe pentru a comenta, numai în funcția de picătură prima linie trebuie să fie e.preventdefault (); Pentru a împiedica să renunțe la piesele care sunt imagini, acțiunea implicită a browserului are loc (care va fi imaginea) și, astfel, este de așteptat totul.

DIV id = „574267E5F4”>

Pentru a termina comentarea funcției de verificare care verifică pur și simplu dacă fiecare piesă este în poziție și dacă o indică acest lucru cu un mesaj. Această funcție trebuie să fie numită de fiecare dată când o piesă este plasată de ceea ce se numește din funcția de picătură.

și în cele din urmă puzzle-ul, astfel încât să îl puteți vedea:

Vedeți puzzle-ul Puzzle & drop html5 de Ivan Salas (@ ISC7) pe codePen

Aici puteți descărca codul celor două exemple.

4 Trimiteți

Leave a Comment

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *