O artă puțin cunoscută de «drag and drop» Cum de a apuca și trageți obiectele

Personalizat interfețe jQuery: o sursă inepuizabilă de Runaway

UIS (Interfețe utilizator - UI) - o colecție de extensii dintr-o bucată, care ajuta pentru a rezolva problemele cele mai persistente. De exemplu, putem (prin linia de cod) pentru a seta elementul pentru a selecta o dată (astfel de calendare mici care apar pe formular pentru a selecta data curentă sau de dorit), și suficient de funcții bogate și opțiuni pentru setări.

Astăzi vom face cunoștință cu metode cum ar fi draggable () și cadea ():

Înainte de a începe, uita-te la pagina cu un exemplu. După cum puteți vedea, pagina este alcătuită din 5 elemente:

* Container (partea dreapta), care este o zonă în care vom trage obiecte.
* Obiectele care nu pot fi trase.
* Obiectele pe care le putem Copiați cu ușurință în recipient.
* Drag și obiect picătură (numai pe orizontală), deplasarea zona este limitată.
* Obiecte Drag, care se estompează în timp ce glisarea regiune a cărei mișcare este limitată, și care este temporizat la container. După cum probabil ați observat, zona mișcării anterioare a obiectului este limitat, dar mai târziu va fi posibil să se deplaseze chiar și în afara containerului.

Ceea ce tocmai ai văzut - asta este ceea ce vom face împreună. Ca întotdeauna, vom începe cu dezvoltarea de cod HTML.

Acum, hai să facem corpul elementului documentului 4 pe partea stângă și pe partea dreapta va crea o zonă de glisare și fixare.

După cum puteți vedea, am stabilit toate cele 4 elemente din interiorul elementului #left_block. Vă rugăm să rețineți clase aplicate pentru fiecare element. O clasă definește un raport de numerotare și alți parametri sunt utilizate pentru a determina (va fi prezentată mai jos) glisarea.

Acum, să ne înscriem fișierul CSS în screen.css

În plus față de centrarea conținutului în interiorul containerului, vom posta elemente și să le cereți la parametrii stilizare minim.

Vom vedea mai târziu că definește clasa Hover.

În antetul documentului, trebuie să apelăm jQuery și extensiile interfețe de utilizator conținute în fișierul jquery-ui-1.7.2.custom.min.js.

În plus, vom face un document creat anterior Cascading Style Sheets - screen.css.

Să ne uităm la documentul, care ar trebui să arate ceva de genul asta.

În această etapă, pagina ar trebui să arate ca în acest exemplu.

Deci, am terminat cu pregătirile, să trecem la faza de cod pentru a activa funcției tragere și.

Cum de a crea un element de «cadea»

Primul lucru de făcut este de a crea un bloc de pe partea dreaptă cu zona, pe care îl puteți trage și plasa un obiect prin intermediul metodei cadea ().

Întregul bloc de cod pe care suntem acum aduse, în scris, în funcția principală.

Acum, să ne uităm la semnificația codului:

* În primul rând suntem generatoare de elemente cu ID-ul de right_block cadea.
* Apoi vom face unele setări primul element pe care trebuie să luați. În cazul nostru, valoarea acestui element .droppable, ceea ce înseamnă că elementele de trăgându separate, prin tipul cadea.
* A doua opțiune - hoverClass. Acesta definește o clasă CSS care trebuie luate în cazul în care elementul târât se găsește în zona. În acest caz, clasa atunci când cursorul mouse-ului este definit suficient de precis - se schimbă culoarea de fundal. Acest lucru ne dă de înțeles că elementul este situat într-o zonă accesibilă la tragere. Un indicator simplu care sporește gradul de utilizare.
* Al treilea parametru este responsabil pentru condițiile în care ar trebui să fie luate în considerare elementul, ca și în zona de glisare și fixare. Avem 4 opțiuni:
• Fit: atunci când întregul element este în regiune pentru a muta
• Pointer: atunci când cursorul mouse-ului este în zona pentru a muta
• Atingeți: atunci când un element draggable vine la limita pentru a muta
• Intersect: atunci când cel puțin jumătate din element este în regiune să se miște;
* În cele din urmă, valorile parametrilor picătură, putem defini o funcție care urmează să fie executată atunci când elementul târât rămâne în domeniu. În această funcție, opțiunea pe care le-am identificat prin intermediul interfeței, va fi obiectul care ne va permite să gestioneze și să aibă acces la un element agitat, sau la care amândoi putem cel puțin apel de ui.draggable. Noi pur și simplu să ne limităm să înlocuiască script-ul conținut în elementul.

șir de caractere codul afișat mai sus: În doar muta un element localiza eticheta «p» și să înlocuiască conținutul script-ul tag-ul «scăzut!».

Cum de a crea elementele de «draggable»

Pentru a genera un obiect draggable, noi nu trebuie să facem altceva decât utilizarea metodei Draggable (), pe care tocmai am discutat. În acest moment începem cu draggable metoda (), aplicarea cu elementul clasa «draggable» (al doilea element):

Dacă încercați să utilizați script-ul, veți observa că acest element a devenit draggable (sau draggable), iar acum îl puteți plasa oriunde. Dar nu se întâmplă nimic dacă o mutați într-o zonă pe care le-am creat pentru obiecte în mișcare. De ce se întâmplă acest lucru?

Am constatat că numai elementele de clasă pot fi deplasate cadea si fixat in domeniu.

Cum de a crea un draggable-obiect cu mișcarea, limitată printr-o singură linie?

Să uite este, de asemenea, un al treilea element.

Din nou, aveți nevoie pentru a crea un obiect cu parametrul draggable, dar adăugați la acesta parametrul deplasarea axei X. Acest lucru înseamnă că elementul activ poate fi Shuffle numai în direcția orizontală. Nu avem nevoie să adăugați această setare, am făcut-o acum doar pentru a vă arăta cât de ușor se face.

Dacă vom transfera acest element în zona de relocare, putem vedea că se schimbă culoarea de fond, iar dacă ne lăsa pe teren, creat pentru a muta elementele, vom vedea că script-ul este schimbat, ceea ce indică faptul că acest eveniment ceva pentru a preveni .

Cu toate acestea, în acest caz, dacă încercați să trageți un element în afara acestui interval, atunci în mod surprinzător, această operație poate fi efectuată.

Dar dacă avem nevoie, așa că elementul a fost legat de un container specific?

Cum de a trage un element și fixați-l în recipient după ce butonul este eliberat?

Trebuie să adăugați acest parametru la ultimul element:

Am stabilit nivelul de transparență al parametrului 0,5. Acest lucru înseamnă că, atunci când se deplasează obiect devine dim. Chiar și în acest caz, parametrul este utilizat pentru experiența vizuală.

Dar ceea ce este interesant, este faptul că parametrul se modifică setările. În acest caz, odată ce elementul este omis în regiune, aceasta nu poate fi tras înapoi. Un alt efect al acestei metode este că, în cazul în care elementul este scăzut în afara regiunii, se va reveni la locația originală.

Aici este funcția completă:

În acest articol, v-am spus despre baza tehnologiei care ne permite să adăugați dinamici în interfața site-ului. De multe ori pe mișcarea elementelor utilizate pentru a crea panoul de administrare într-o varietate de motoare, în cazul în care totul pot fi mutate, șterse sau mutate într-o altă secțiune și așa mai departe.

Pe de altă parte, cererea principală pentru această tehnologie este coșul (coș de cumpărături) magazine online. În ea puteți vedea un exemplu clar de aplicare a acestei tehnologii.