Glisarea elementelor de interfață cu cursorul mouse-ului este cel mai probabil cel mai intuitiv mod de a interacționa cu utilizatorul site-ului sau aplicației. Oamenii încearcă adesea să utilizeze drag and drop cu cursorul mouse-ului pentru astfel de acțiuni:
- Mutarea mesajelor de e-mail în dosare.
- Modificați ordinea articolelor în liste.
- Mutarea obiectelor în jocuri, cum ar fi jocuri de cărți sau puzzle-uri.
În această lecție ne vom uita la modul de a crea o interfață cu tehnica de drag-and-drop-l la jQuery și de a construi o aplicație completă: joacă de copii pe hărțile de aspect.
Pentru a adăuga funcționalitatea drag-and-drop la paginile dvs., trebuie să includeți biblioteca jQuery și pluginul jQuery UI. jQuery UI este un plus fantastic pentru jQuery și include un număr mare de widget-uri de interfață pentru punerea în aplicare a diferitelor efecte vizuale și algoritmi de lucru, inclusiv pentru tehnologia drag & drop.
Cea mai ușoară modalitate de conectare a bibliotecilor este utilizarea serviciului Google CDN:
Faceți elementul draggable
Când adăugați un element la pagina dvs. web (de exemplu, div sau o imagine), acesta este fixat într-o anumită poziție. Cu toate acestea, folosind jQuery UI este ușor să faceți drag and drop cu cursorul mouse-ului.
Pentru a face articolul mobil, apelați pur și simplu metoda draggable (). Aici:
Adăugați opțiunile de tragere și plasare
Metoda draggable (), puteți trece o mulțime de opțiuni diferite pentru a personaliza comportamentul elementului în timp ce trageți:
Unele opțiuni utilizate frecvent dintr-o listă mare:
reținere În mod prestabilit, puteți trage elemente pe întreaga pagină. Dar puteți restrânge zona de mișcare la o anumită parte. Pentru opțiuni pot fi folosite valori de izolare: „mamă“ limitează părinte elementul „document“ deplasare suprafață regiune Limitarea muta întreaga pagină „fereastra“ limitează selectorul zona de deplasare fereastra browser limitează deplasarea zona selectată element de matrice de 4 valori ([x1, y1, x2, y2 ]) Limitați zona de mișcare la un anumit cursor de dreptunghi Schimbați cursorul când vă deplasați. De exemplu, puteți seta valoarea pentru a "muta". astfel încât cursorul mouse-ului să aibă aspectul de a intersecta săgeți bidirecționale atunci când trageți un element. Instalați selectorul de completare snap (de exemplu, fixați: „#snapToMe“), elementul la care aderă tras element. De asemenea, puteți seta această valoare la adevărată, astfel încât elementul tras să adere la orice alt element drag-and-drop al paginii. stiva Dacă creați un grup de drag and drop elemente, cum ar fi un set de cărți, este de obicei una dintre ele, de obicei, ultima pentru a muta obiectul ar trebui să fie plasat în partea de sus a altor elemente ale grupului. Prin setarea valorii opțiunii de stivă ca selector care corespunde unui grup de elemente, puteți realiza acest comportament al obiectelor. jQuery UI solicită proprietăți indexului z elemente, astfel încât elementul tras curent va fi plasat pe partea de sus.
Să ne schimbăm exemplul pentru a utiliza câteva opțiuni:
Rețineți modificarea comportamentului obiectului tras: mișcarea sa este limitată la #content. Modul cursorului se modifică, iar elementul tras în sine se leagă de limitele elementului de legare.
Folosim un element auxiliar
Elementul helper este utilizat în timpul tragerii în locul elementului original. Această metodă este foarte convenabilă dacă doriți să păstrați elementul original în locul său, dar, în același timp, permiteți utilizatorului să tragă ceva din poziția sa în alt loc pe pagină. De exemplu, permiteți utilizatorului să tragă indicatorul de culoare din paletă la obiectul pentru care doriți să modificați culoarea.
Pentru a utiliza ajutorul, trebuie să setați opțiunea de ajutor. Valorile disponibile pentru această opțiune sunt:
"original" Valoarea implicită. Elementul original se mișcă. 'clone' Este creată o copie a elementului care este mutat. Funcție Această opțiune vă permite să creați un element auxiliar arbitrar. Definiți o funcție care ia un obiect de eveniment și returnează marcajul elementului helper. Acest element se mută apoi în locul originalului.
Când se folosește valoarea "clonei" sau a funcției, elementul helper este distrus când operația de tragere și fixare este finalizată. Cu toate acestea, puteți utiliza evenimentul de oprire. pentru a obține informații despre elementul auxiliar (de exemplu poziția acestuia) înainte de distrugere.
Următorul exemplu folosește o funcție pentru a crea un element helper personalizat pentru o operație de tragere și plasare. Modificăm exemplele anterioare:
Evenimente: reacționăm la mișcări
Adesea, atunci când un utilizator trage un element, trebuie să știți când a început și sa încheiat tragerea, precum și noua poziție a elementului. Puteți lega funcții pentru a gestiona mai multe evenimente generate de o operație de tragere:
Lista evenimentelor disponibile:
create Generate când se creează un element draggable prin apelarea funcției draggable (). start Generă când începe procesul de tragere și plasare. trageți generat atunci când cursorul mouse-ului este mutat în timp ce trageți un element. stop Generat când utilizatorul eliberează butonul mouse-ului după ce a tras elementul.
Operatorul de evenimente trebuie să ia două argumente:
- Obiectul evenimentului.
- Un obiect jQuery UI care reprezintă un element drag (ui).
Pentru obiectul ui, există 3 opțiuni disponibile pentru a obține informații despre elementul drag-and-drop:
helper Un obiect jQuery care reprezintă un element auxiliar pentru tragere. position Un obiect care conține poziția elementului tras în raport cu poziția inițială. Obiectul are două proprietăți: stânga (coordonatează X din marginea din stânga a elementului) și partea superioară (coordonatele Y din partea superioară a elementului). offset Un obiect care conține poziția elementului care este tras în raport cu documentul. Pe lângă poziția obiectului. are două proprietăți rămase și de sus.
Să ne schimbăm exemplul astfel încât să afișeze informații despre poziția finală a elementului tras în raport cu documentul când utilizatorul eliberează butonul mouse-ului:
Setați stilurile pentru elementul tras
Uneori este important să dați elementului tras un aspect diferit. De exemplu, trebuie să selectați elementul tras sau să adăugați o umbră pentru aceasta, astfel încât să pară ridicată deasupra paginii.
Atunci când trageți elementul jQuery, UI utilizează clasa CSS care se deplasează ui-draggable pentru aceasta. Puteți seta proprietăți pentru această clasă pentru a schimba stilul elementului care urmează a fi tras.
Să schimbați codul exemplului nostru astfel încât pătratul să schimbe culoarea de la roșu la verde atunci când trageți:
Setați elementul țintă pentru tragere și plasare
Tocmai am descris cum să facem un element drag-and-drop și cum să gestionăm evenimentele drag-and-drop.
Dar există și un alt mod de a reacționa la articolele care trag. Puteți crea un element țintă. care va accepta articolele trase.
Atunci când un element tras este aruncat peste elementul țintă, acesta generează un eveniment de cădere. Prin scrierea funcției manipulatorului evenimentului drop. puteți determina elementele percepute de elementul țintă.
De asemenea, puteți utiliza evenimentele de depășire și de ieșire pentru a determina când elementul tras este mai mare decât ținta și când o părăsește. Pentru mai multe informații, consultați documentația pentru jQuery UI.
Pentru a face un element țintă, trebuie să utilizați metoda droppable ().
Să schimbăm codul pentru exemplul nostru pentru a crea elementul țintă:
Am creat funcția handleDropEvent () pentru a răspunde la evenimentul drop. Deoarece acesta este un eveniment drag-and-drop, funcția trebuie să ia două argumente: eveniment și ui.
Obiectul ui are o proprietate draggable. a căror valoare corespunde elementului care este tras. Funcția noastră utilizează această proprietate împreună cu metoda jQuery attr () pentru a obține ID-ul elementului tras ("makeMeDraggable").
concluzie
În prima parte, am analizat punctele principale pentru crearea unei aplicații care utilizează tehnologia drag-and-drop. În următoarea parte, vom construi o aplicație completă simplă - un joc pentru copii pe aspectul hărții.
Ultimele 5 lecții din rubrica "jQuery"
Astăzi dorim să vă spunem despre biblioteca TypeIt - un plugin jQuery gratuit. Cu aceasta, puteți simula tastarea. Dacă totul este ajustat corect, puteți obține un efect foarte realist.
jQuery plugin pentru crearea unei cronologii.
jQuery plugin pentru crearea unei diagrame Gantt.
Un exemplu de încărcare a unui fișier prin PHP și jQuery ajax.
prima) da, într-adevăr jq ui simplifică viața)
Scris special punerea în aplicare kament pe js pure la 1KB, iar apoi eroare „linia include o porțiune a simbolului repetitiv“ - toate dorința de a ajuta a dispărut
Michael Neger
SonikAbstain
La mine într-un demo pătratul roșu undeva a fost pierdut, după ce am dorit să-l! )))
Prin obținerea de informații imediat prin două canale (vedere și auz), eficiența predării este mult mai mare decât învățarea din cărți. Și temele și testele online vă vor permite să gândiți constant în limba pe care o învățați și să vă verificați imediat cunoștințele!
Dacă doriți să învățați HTML mult timp, atunci am o veste bună pentru dvs.!
Dacă ați învățat deja HTML și doriți să treceți mai departe, următorul pas este să învățați tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!
Articole similare
Trimiteți-le prietenilor: