Pluginul Draggable vă permite să faceți elemente de pagină navigabile cu mouse-ul. Aceste elemente primesc automat clasa ui-draggable. și în momentul în care se mișcă și ui-draggable-dragging.
Elementele drag-and-drop generează trei noi tipuri de evenimente: porniți, trageți și opriți. Ele apar în momentul capturării, în mișcare și în momentul eliberării elementului mutat. Operatorii care gestionează aceste evenimente vor primi 2 parametri: un obiect standard de eveniment din browser și un obiect suplimentar (apelați-l ui) cu următoarele câmpuri:
ui.helper este un ajutor în forma unui obiect jQuery. Detalii despre acest element pot fi găsite în descrierea proprietății ajutorului. ui.position - poziția elementului mutat față de cel mai apropiat părinte cu tipul de poziționare specificat (poziția css-proprietate este relativă sau absolută sau fixă). ui.offset este poziția elementului care se deplasează față de începutul documentului.
Pentru a modifica coordonatele unui element în momentul deplasării, puteți utiliza proprietatea de poziționare din cadrul procesatorului de evenimente:
sau proprietatea offset, care poate fi obținută direct de la obiectul mutat:
↓ Denumire proprietate: tipuri de valori (valoarea implicită)
Opreste \ reia capacitatea de a glisa și fixa elemente de pagină.
Setați această proprietate la falsă. anulează instalarea automată a clasei "ui-draggable" pe elementele trase. Aceasta poate fi o măsură de optimizare, în cazul în care este necesar să trageți câteva sute de elemente sau chiar mai multe.
Acest parametru specifică ce element al paginii va fi plasat elementul helper (ajutor, vezi aceeași proprietate). În mod prestabilit, acesta este plasat și acolo, unde este localizat elementul mobil. appendTo poate fi specificat de un element DOM sau selector. pe care elementul va fi căutat.
Acest parametru determină în ce direcție elementul poate fi mutat. Valorile posibile sunt "x". "y" și false (numai vertical, numai orizontal sau în orice altul).
Parametrul de anulare specifică ce elemente nu pot fi "luate" pentru a muta elementul sursă.
Specifică dacă un element draggable poate fi adăugat la un set de elemente direcționate (a se vedea pluginul selectat). Parametrul poate fi fie fals. sau o linie cu un selector care definește un grup de elemente de direcție. Pentru funcționarea corectă a scriptului, elementul draggable este de dorit să setați helper helper: "clone" (vezi proprietatea helper).
Parametrul de restricționare specifică restricțiile privind mișcarea elementului în timpul tragerii. În mod implicit, ele nu sunt, dar ele pot fi date o suprafață a unui element (de exemplu, cu selectorii „mamă“, „document“, „fereastra“ etc.) și, în plus, puteți seta limite de dreptunghi cu coordonatele [x1, y1, x2 , y2].
Elementele drag-and-drop pot fi învățate să "magnetizeze" marginile altor elemente (vezi exemplul "Margini magnetice" de mai sus). Pentru aceasta, setați proprietatea snap la true. La care elementele care vor fi magnetizate vor fi magnetizate unele cu altele. În plus, parametrul snap poate fi atribuit unui selector și apoi elementul mutat va fi magnetizat numai la elementele care îi corespund. Proprietățile snapMode și snapTolerance vă vor ajuta să ajustați parametrii de magnetizare.
Proprietatea snapMode specifică modul de magnetizare a elementului tras (vezi proprietatea snap). Valorile posibile sunt "interioare", "exterioare", "ambele". Ele înseamnă că elementele trase vor fi magnetizate numai la interior, numai la elementele externe sau la cele două laturi ale elementelor selectate în proprietatea snap.
snapTolerance determină distanța (în pixeli) pe care începe magnetizarea (vezi proprietatea snap).
Elemente de Draggable găsite prin intermediul unui selector stivă predeterminat de la început să se deruleze în mod automat va primi cea mai mare Z-index (a se vedea. Exemplul de mai sus de „Auto indexului z“).
Articole similare
Trimiteți-le prietenilor: