Cuprins
Efectul trage si lasa Acesta constă în preluarea unui element al paginii cu un gest al mouse-ului, de obicei făcând clic pe acesta și trăgând elementul menționat într-o zonă în care poate fi depus, apoi, în funcție de funcționalitatea paginii noastre, va avea loc un nou eveniment sau nu.În vremuri anterioare, acest lucru a fost realizat folosind Biblioteci și cadre Javascript jQuery-style, deoarece suportul HTML a fost limitat, însă cu HTML5, avem aceste funcționalități deja incluse în browserul nostru.
Crearea elementelor pentru tragere
În documentul HTML trebuie să definim elementele care vor putea folosi acest efect, pentru aceasta avem câteva proprietăți care ne vor ajuta în acest scop.
La plasarea atributului glisabil către un element îi indicăm browserului că acest element poate fi sau nu tras, pentru aceasta atributul are valorile true, false și auto, după cum putem deduce, true spune browserului că, dacă trebuie să fie un element care este târât, fals este altfel, dezactivează efectul și automat îi spune browserului să ia decizia dacă activează sau nu efectul în sine.
O bună practică este să folosești adevărat sau fals pentru a indica în mod explicit dacă efectul este activat sau nu, deoarece, deși majoritatea browserelor interpretează valoarea auto ca fiind adevărată, nu ar trebui să lăsăm cursul paginii noastre unor terți.
Evenimente cu efect de tragere
Înainte de a trece la exemplu, vom defini o altă caracteristică importantă a glisării unui element, acesta este faptul că, atunci când începeți glisarea unui element, avem 3 evenimente pe care le putem identifica și cu care putem efectua diverse prelucrări dacă dorim să , aceste evenimente sunt:
dragstart, este începutul evenimentului de glisare are loc atunci când plasați mouse-ul peste element, faceți clic și începeți să glisați elementul respectiv.
trage, se întâmplă după dragstart și durează tot drumul în care tragem elementul.
dragend, apare în momentul în care nu mai trageți obiectul, fie că îl lăsăm în zona de depozit, fie că ne-am căit și am încetat să-l trageți pe jumătate.
Implementarea cu glisare
Să vedem mai jos un exemplu de cum încorporăm toate cele de mai sus într-o pagină, vom crea o listă de elemente cărora le vom atribui atribut glisabil ca fiind adevărat, vom crea câteva clase CSS care ne vor permite să le modificăm stilurile și, în cele din urmă, cu evenimentele menționate când vom trage un element, acesta își va schimba culoarea.
Să vedem codul:
Exemplu
Depuneți aici
Acum, cum arată în browserul nostru:
