Sfat rapid creați o funcție Faceți clic și trageți cu JavaScript

În multe aplicații web moderne, dezvoltatorii caută modalități de a face mai ușor și mai intuitiv pentru utilizatori să interacționeze. Funcția de tragere și selectare poate ajuta utilizatorii dvs. să selecteze rapid mai multe obiecte.

Pasul 1

Mai întâi trebuie să creăm grupul de obiecte care vor fi selectate. Mai mult decât probabil, majoritatea oamenilor vor folosi scriptul de partea serverului, cum ar fi C # sau PHP. Din moment ce acest lucru este dincolo de sfera acestui tutorial, în loc să le creez manual. Putem folosi majoritatea etichetelor ca obiecte. Singura cerință este că obiectul trebuie să aibă misiuni de bază ale mouse-ului atribuite acestora. Pentru acest tutorial voi folosi pur și simplu un tabel cu două rânduri și cinci celule umplut cu DIV cu unele CSS de bază pentru a le da forma.

Partea cea mai importantă în crearea obiectelor este ID-ul; toți trebuie să aibă un nume similar. Mina va fi "cutie" - și apoi un număr unic după nume. În consecință, ID-ul primului nostru element va fi "box1" iar ultima noastră va fi "box10". Acum trebuie doar să adăugăm evenimentele mouse-ului. Pentru fiecare DIV trebuie să atribuim funcția "onmousedown" funcției noastre javascript și să trecem în obiectul care apelează funcția cu cuvântul cheie "acest"

Pasul 2

Acum că am făcut HTML-ul nostru de bază, trebuie să scriem javascript. Există trei părți principale ale funcției noastre javascript: acțiunea care se întâmplă de fiecare dată când selectați sau deselectați un obiect, acțiunea care pornește tragerea după primul clic și acțiunea care oprește tragerea selectată. Înainte de oricare dintre acestea avem nevoie să facem o funcție javascript și să trecem într-o variabilă numită "obj", acesta va fi obiectul numit acest eveniment.

funcția StartDragSelect (obj) 

Pentru acțiunea care declanșează după ce un obiect este selectat sau deselectat, avem mai întâi nevoie de o modalitate prin care funcția noastră să știe dacă acest obiect este selectat sau deselectat în prezent. Puteți folosi cele mai multe atribute pentru a face acest lucru, dar eu găsesc cea mai bună cale cu o clasă CSS. Nu numai că clasa CSS va spune javascript dacă obiectul este selectat sau nu, dar puteți adăuga, de asemenea, reguli CSS la clasa selectată, astfel încât utilizatorii să poată să distingă vizual ce obiecte sunt selectate. Pentru javascript, tot ce avem nevoie este o declarație simplă dacă -else. Pentru această demonstrație voi actualiza un interval cu numărul total de obiecte selectate, dar ați putea de asemenea să apelați funcțiile ajax și alte lucruri distractive aici pentru a face ca tragerea să fie mai puternică.

funcția StartDragSelect (obj) if (obj.className == "selectat") obj.className = ""; selectNum--;  altfel obj.className = "selectat"; selectNum ++;  document.getElementById ("selectCount") interiorHTML = selectNum; 

Pentru a porni selecția de tragere, vom folosi o "for loop" pentru a prelua evenimentul de pe orice obiect al unui obiect și al atribui evenimentului onmouseover al obiectului. Dacă am fi folosit un script de server pentru generarea obiectelor noastre, am vrea să trecem și numărul total de obiecte la funcția javascript, astfel încât bucla va funcționa, dar din moment ce le-am creat manual, putem codifica greu numărul.

pentru (i = 0; i<11;i++)  document.getElementById(i+'d').onmouseover = document.getElementById(i+'d').onmousedown 

Acțiunea de stop va fi atribuită evenimentului onmouseup al obiectului care a pornit selectarea tragerii. Pentru a face acest lucru, vom folosi o funcție anonimă pentru a spune javascript ce să facă când evenimentul onmouseup declanșează. Apoi vom folosi o "bucla" pentru a realoca evenimentul onmouseup și a face evenimentul onmouseover nul.

obj.onmouseup = functie () pentru (i = 1; i<11;i++)  document.getElementById(i+'d').onmousedown = document.getElementById(i+'d').onmouseover; document.getElementById(i+'d').onmouseover = null;  

Ați terminat! Evident, acest exemplu este trivial și utilizează Javascript încorporat (de dragul simplității). Dar, sunt sigur că vă puteți imagina posibilitățile! Ai o cale mai bună?