De mulți ani, am folosit pentru a simplifica elementele de interfață complexe, cum ar fi animațiile, colțurile rotunjite și drag-and-drop, bibliotecile JQuery și Dojo. Fără îndoială, recursul extern este important pentru crearea de site-uri de înaltă calitate, dar de ce aveți nevoie de o bibliotecă pentru sarcini comune pe care toți dezvoltatorii o folosesc?
Detectarea funcțiilor
Multe aplicații care utilizează drag and drop nu pot face fără ea. Imaginați-vă că ar trebui să vă gândiți prin jocul de șah fără a avea capacitatea de a muta piesele. În ciuda suport complet pentru browser-ul pentru a determina dacă acesta este pus în aplicare drag and drop (sau alte caracteristici HTML5, pentru a îndeplini aceeași sarcină), este necesar să se prevadă o soluție care poate reduce calitatea energiei electrice. Dacă funcția de tragere și plasare nu este disponibilă, puteți implementa aplicația conectând biblioteca.
Dacă aveți nevoie de capabilități API, în loc să definiți parametrul User-Agent al browserului, utilizați descoperirea funcțiilor. Una dintre cele mai bune biblioteci pentru detectarea funcțiilor se numește Modernizr. Pentru fiecare funcție verificată, Modernizr specifică o valoare booleană. Rezultatul este un cod de verificare foarte scurt pentru prezența funcției drag-and-drop:
Creați conținut drag-and-drop
Este foarte ușor să faci un obiect draggable: acest lucru se face folosind atributul draggable = true. Drag-and-drop poate fi activat pentru aproape orice element, inclusiv imagini, link-uri, fișiere și chiar noduri DOM.
De exemplu, să începem prin crearea coloanelor regrupate. Eticheta de bază ar putea arăta astfel:
Trebuie remarcat faptul că în majoritatea browserelor este acceptată implicit tragerea de fragmente selectate de text, imagini și elemente de legare cu atributul href. De exemplu, atunci când trageți un logo pe un site google.ro, apare o imagine fantomă:
Folosind CSS3, puteți reprezenta marcajul sub formă de coloane. Prin adăugarea atributului cursor: muta, utilizatorii obțin un indicator vizual al mobilității elementului:
Rezultat (elementele pot fi trase dar nu fac nimic):
În exemplul de mai sus, majoritatea browserelor creează o imagine fantomatică a conținutului care este tras. Altele (în special FF) în timpul operației de tragere necesită transmiterea datelor. În următoarea secțiune, vom face exemplul cu coloanele mai interesant prin adăugarea de ascultători pentru a trata modelul evenimentului de tragere.
Ascultarea evenimentelor Tragere și Drop
Pentru a controla procesul de tragere, puteți utiliza un număr de evenimente:
1. Începeți Trageți
După definirea conținutului atributului draggable = "true". adăugați agenți de procesare a evenimentelor dragstart. care va executa secvența de tragere pentru fiecare coloană.
De îndată ce utilizatorul începe să tragă coloana, acest cod va reduce opacitatea la 40%:
Deoarece ținta evenimentului dragstart este elementul nostru sursă, setarea acestui atribut la this.style.opacity la o valoare de 40% va permite utilizatorului să vadă mișcarea elementului selectat. Trebuie doar să întoarcem opacitatea la 100% a coloanelor după tragere. Pentru a rezolva această problemă, utilizați evenimentul dragend. Vom discuta mai detaliat mai târziu.
2. dragenter, dragover și dragleave
Pentru a crea noi solicitări vizuale în timp ce trageți, puteți utiliza agenți de procesare a evenimentelor dragenter. dragover și dragleave. De exemplu, dacă obiectul tras este peste o coloană, granița ultimului devine o linie întreruptă. Acest lucru va arăta utilizatorilor că coloanele pot fi, de asemenea, ținta tragerii.
În acest cod, există mai multe puncte de reținut.
3. Finalizați tragerea
Exemplul nostru cu coloanele nu se va face fără evenimentul de cădere. dar înainte de aceasta, trebuie să modificați ceva eliminând clasa de peste din fiecare coloană utilizând evenimentul dragend:
Dacă ați urmat cu atenție ceea ce sa întâmplat, ați observat că tragerea coloanelor din exemplul nostru nu funcționează așa cum ar trebui. Introduceți obiectul DataTransfer.
Obiect DataTransfer
Proprietatea DataTransfer este locul în care este implementată metoda drag and drop. Conține o parte din datele trimise atunci când se efectuează această acțiune. Obiectul dataTransfer este setat în evenimentul dragstart. dar este citit și procesat în evenimentul drop. Când se apelează o funcție e.dataTransfer.setData (format, date), conținutul obiectului este atribuit-tip MIME, iar datele utile sunt transmise ca argumente.
În exemplul nostru, HTML propriu-zis al coloanei sursă este date utile:
Convenabil, obiectul dataTransfer are, de asemenea, o funcție getData (format). Permite livrarea datelor drag-and-drop de tip MIME. Iată cum arată procesul de tragere modificat pentru coloană:
Pentru comoditate, la deplasarea coloanelor, am adăugat variabila globală dragSrcEl. În funcția handleDragStart (), elementul innerHTML al coloanei originale este stocat în el. Ulterior este citit de funcția handleDrop (). schimbarea codului HTML al coloanelor sursă și țintă.
Trageți Proprietăți
Obiectul dataTransfer are proprietăți care creează o sugestie vizuală utilizatorilor în timpul procesului de drag-and-drop. Acestea pot fi, de asemenea, folosite pentru a controla răspunsul fiecărei ținte la un anumit tip de date.
Rezultat (la tragerea acestor coloane, ar trebui afișată sigla Google):
Trageți și fixați fișierele
Folosind API drag-and-drop, puteți glisa și fixa fișiere de pe desktop într-o aplicație web deschisă în fereastra browserului. În plus, Google Chrome vă permite să trageți și să aruncați obiecte de fișiere din fereastra browserului pe desktop.
Trageți și plasați din desktop în browser
Tragerea unui fișier de pe spațiul de lucru se face cu ajutorul unor aplicații drag-and-drop, precum și pentru alte tipuri de conținut. Diferența principală este cea de la manipulatorul evenimentului drop. În loc de a utiliza obiectul dataTransfer.getData () pentru a accesa fișierele, datele sunt plasate în proprietatea dataTransfer.files:
Trageți și plasați din browser pe desktop
Un ghid complet pentru a trage și a lăsa fișiere din browser spre desktop este dat în Drag and drop fișiere din ambele Gmail de pe site-ul CSS Ninja.
Iată versiunea finală cu aspect îmbunătățit și contor de mișcare:
În acest exemplu cu coloane, este interesant că fiecare dintre ele este simultan obiectul sursă și scopul de a trage. Cel mai adesea, elementele sursă și țintă sunt diferite. Uită-te la exemplul: html5demos.com/drag.
concluzie
Modelul de tragere în HTML5 este mult mai complex decât alte soluții, cum ar fi interfața jQuery. Cu toate acestea, dacă aveți abilitatea de a utiliza API-ul browserului încorporat, trebuie să îl utilizați. În cele din urmă, aceasta este esența HTML5: să standardizeze și să pună la dispoziție întregul set de capabilități ale browserului. Sperăm că, în timp, bibliotecile populare care utilizează funcția de tragere și plasare vor include implicit suportul HTML5 și capacitatea de a personaliza soluția JS în moduri diferite.
Bucurați-vă de acest articol? Luați feedul RSS și rămâneți la zi.
Cu excepția cazurilor în care se specifică altfel. conținutul acestei pagini este licențiat sub licența Creative Commons Attribution 3.0. și eșantioanele de cod sunt licențiate sub licența Apache 2.0.