Cel mai simplu este să iei ceva și să-l pui, decât să scrii, ce să iei și unde să-l pui. Desigur, fără un mouse sau un dispozitiv similar, nu puteți alege nimic și nu indica nimic, dar chiar și în situația actuală, utilizarea ideii de „glisare și fixare” este foarte naturală și confortabilă.

Domeniul de aplicare al ideii este departe de a fi doar magazine online, biblioteci electronice, motoare de căutare sau Sisteme de informare, dar și sfera aplicată. Ideea este foarte aplicabilă în dezvoltarea site-urilor și a elementelor acestora, create și întreținute interactiv, fără participarea unui programator.

Descrierea ideii

Selectați, mutați și plasați - ideea este naturală și convenabilă. Este uimitor că nu s-a născut când mouse-ul a devenit un accesoriu indispensabil pentru computer.

Cel mai evident exemplu este alegerea unui produs într-un magazin online. Luarea produsului dorit cu mouse-ul și tragerea acestuia în coșul de cumpărături este simplă, naturală și convenabilă. Încărcarea fișierelor: Luarea unui document în afara ferestrei browserului și plasarea lui pe un element de pagină, inițiind astfel transferul documentului pe server, este, de asemenea, o idee practică.

Pentru dezvoltator, ideea „trageți și plasați” este manipularea elementelor paginii fără a recalcula manual coordonatele și dimensiunile etichetelor, capacitatea de a selecta mai multe elemente și de a le alinia, precum și de a muta părțile laterale ale etichetelor bloc.

HTML și CSS - limbi grozave descrieri ale etichetelor și stilurilor designului lor, dar atunci când un dezvoltator are capacitatea de a manipula interactiv elementele paginii fără a recalcula manual coordonatele și dimensiunile, acest lucru face munca mai confortabilă și mai eficientă.

Transfer ușor de fișiere

„Drag and drop”: traducerea din engleză în rusă sună literalmente „drag and drop”. În practică, sună și funcționează mai bine: alegeți, transferați și eliberați - simplu și natural.

Este foarte simplu de implementat pe o pagină transferul de fișiere pe o pagină, pe un server sau pentru alte utilizări.

În acest exemplu, mai multe fișiere de pe desktop au fost selectate cu mouse-ul (imaginea din stânga). La selecție, butonul stâng al mouse-ului a fost apăsat și selectat „a mers” la coș. Browserul însuși a arătat cum se întâmplă acest lucru, a scris un indiciu „copie” și a creat contururile fișierelor pentru a fi mutate.

Când mouse-ul a fost peste coș, vizitatorul a eliberat butonul stâng al mouse-ului, a avut loc evenimentul drag-and-drop și codul JavaScript de pe pagina site-ului (imaginea de jos) a putut să primească și să proceseze toate fișierele pe care vizitatorul le-a furnizat. către pagină (site).

Descrierea implementării

Codul care realizează această procedură este foarte simplu. Chiar și un dezvoltator începător îl poate repeta în orice caz de utilizare.

Aici interfața cu utilizatorul este reprezentată de două etichete: scPlaceFile (acesta este coșul în sine, unde trebuie să puneți fișiere) și scPlaceFiles (acesta este rezultatul procesării fișierelor, în acest caz o listă a acestora).

Logica paginii este următoarea. Când pagina este încărcată în browser, handlerul de evenimente „ondrop” este alocat în coș - pentru a pune, restul evenimentelor sunt blocate și nu sunt folosite.

Pagina funcționează în modul normal, dar de îndată ce vizitatorul selectează fișierul (fișierele) și le trage pe imaginea coșului, adică la eticheta scPlaceFile, va începe procesarea evenimentului „fișiere sosite”.

Acest handler afișează pur și simplu o listă de fișiere. Numărul lor este în event.dataTransfer.files.length, iar informațiile despre fiecare fișier sunt în event.dataTransfer.files [i] .name. Ce să faceți cu datele primite este determinat de dezvoltator; în acest caz, se formează pur și simplu o listă a fișierelor primite.

Odată procesat, evenimentul este blocat și nu este propagat. Acest lucru este necesar pentru ca browserul să nu desfășoare activități independente și să nu interfereze cu prelucrarea informațiilor primite.

DnD și date externe

Încărcarea imaginilor pe un server folosind drag and drop este o practică obișnuită în această tehnologie. De obicei, dezvoltatorul creează un formular de încărcare a fișierelor (1) care funcționează în mod obișnuit (2). Vizitatorul poate intra Mod normal selectați fișierele și încărcați-le.

Totuși, dacă vizitatorul dintr-un anumit loc din formular face „glisare și plasare”, atunci câmpul de nume fișier(e) va fi completat automat.

Acest buna decizie... Este, desigur, foarte greu de recunoscut că nu există mouse pe computer. Dar este mai bine să proiectați interfața cu utilizatorul într-un mod regulat și într-o implementare DnD.

DnD și date interne

A avea grijă de interesele vizitatorului este întotdeauna importantă, dar și preocupările dezvoltatorului contează. Drag and drop poate fi implementat nu numai prin mijloace standard, ci și prin gestionarea evenimentelor mouse-ului pe elementele paginii.

Sarcina de a calcula valorile coordonatelor etichetelor și dimensiunile acestora apare în mod constant. Calculul manual este o practică bună, dar opțiunea interactivă este mai convenabilă. Toate etichetele sunt întotdeauna dreptunghiulare și, urmărind evenimentele mouse-ului pe părțile laterale ale elementelor, puteți crea posibilitatea de a muta automat elementele în locul potrivit pe pagină sau de a le modifica.

Gestionarea evenimentului de clic pe un buton al mouse-ului - stocarea coordonatele locului clicului, de exemplu, una dintre laturile unui element. Mutați mouse-ul - partea laterală se mișcă în direcția dorită. Eliberarea butonului mouse-ului - partea laterală se oprește și coordonatele sale se schimbă. În acest fel puteți modifica poziția elementului sau dimensiunea acestuia.

Acest lucru nu este în mod oficial „glisare și fixare”, dar efectul este similar și practic. Făcând handlere universale pentru orice element de pagină, puteți obține rezultate interactive bune, puteți accelera dezvoltarea și puteți simplifica codul.

Programare vizuală și manuală

Un mouse pe un computer și degetele pe un smartphone sunt abordări complet diferite pentru implementarea unei interfețe cu utilizatorul (vizitator, dezvoltator). Aceasta este o cerință naturală și modernă pentru compatibilitatea între browsere.

Toate acestea împreună fac dificilă crearea paginilor, dar aplicând ideea de „glisare și plasare” în ea forma standard folosind evenimentele sale, combinând această idee cu evenimente obișnuite pe elemente, puteți implementa un mecanism în care crearea paginii va avea loc vizual.

Acum să ne uităm la selecția unui articol sau articole. Faptul de selecție este apariția unui meniu contextual, de exemplu, scopul este alinierea celor selectați (stânga, dreapta, centru), sau distribuirea elementelor pe verticală sau orizontală cu același pas, sau modificarea dimensiunilor acestora (minim, maxim) .

Recalcularea automată a coordonatelor și dimensiunilor este de preferată recalculării manuale. Mai puține greșeli - obiectivul este atins mai repede. În plus, puteți face o pagină într-un singur browser, salvați poziția și dimensiunea elementelor. După ce ați deschis această pagină pe un smartphone, puteți corecta valorile coordonatelor și dimensiunilor și le puteți aminti pentru model specific versiunea pentru smartphone sau browser.

Așadar, aceeași pagină fără respectarea manuală a cerinței între browsere va avea date diferite de afișat diferite dispozitiveși în diverse browsere.

Dacă permiteți vizitatorului să efectueze singur aceste proceduri, precum și să selecteze elementele de pagină necesare dintre cele furnizate de dezvoltator, puteți asigura compatibilitatea între browsere și funcționalitatea necesară a paginii, ținând cont de opinia utilizatorului .

Funcția de glisare și plasare poate ajuta la creșterea performanței iPad-ului. Iată cum îl puteți folosi.

Astfel, puteți muta un fișier dintr-un serviciu de stocare în cloud în altul, puteți copia text din Safari într-o aplicație de editare a textului pentru a adăuga un citat sau a crea backup anumite fotografii în aplicația de stocare a fișierelor.

Cum să glisați și să plasați fotografii, fișiere și text

1. Atingeți lung o fotografie, un fișier sau un text evidențiat pe care doriți să-l trageți într-o altă aplicație.

2. Trageți elementul în locația dorită în această anexă sau altul pe care l-ați deschis în modul „Slide Over” sau „Split View” și eliberați.

Cum să glisați și să plasați mai multe fotografii sau fișiere în același timp

1. Atingeți lung una dintre fotografiile sau fișierele pe care doriți să le trageți.

2. În timp ce trageți elementul curent, atingeți o altă fotografie sau fișier pe care doriți să îl trageți. Faceți-o din nou cu câte articole doriți să mutați.

3. Trageți toate obiectele selectate în locația desemnată într-o altă aplicație pe care ați deschis-o în Slide Over sau Split View și eliberați-le.

Cum să trageți text dintr-o aplicație în alta

1. Atingeți și mențineți apăsată partea de text pe care doriți să o trageți pentru a o selecta.

2. Utilizați punctele de selecție pentru a selecta restul textului pe care doriți să-l trageți.

3. Apăsați și mențineți apăsat textul evidențiat.

4. Trageți textul în aplicația în care doriți să îl plasați și eliberați-l.

Cum să schimbați aranjamentul pictogramelor mai multor aplicații simultan folosind „Drag and Drop”

În timp ce majoritatea funcționalității de glisare și plasare din iOS funcționează numai pe iPad, acest truc funcționează de fapt atât pe iPhone, cât și pe iPad. Acest lucru vă permite să organizați aranjarea aplicațiilor pe ecranul de pornire folosind « Trageți și plasați ”în loc să le mutați unul câte unul.

1. Apăsați și mențineți apăsată pictograma aplicației pe care doriți să o repoziționați pe ecranul de start.

2. Atingeți și aplicațiile suplimentare pe care doriți să le mutați.

3. Trageți aceste aplicații în pagina sau folderul în care doriți să fie și eliberați-le.

182

În acest exemplu, selectăm elementul div și îl facem flotabil prin apelare metoda dragable ().... După cum se arată în figura de mai jos, în documentul deschis, elementul își ia poziția normală, dar după aceea poate fi mutat cu cursorul mouse-ului în orice loc din fereastra browserului:

Funcția de glisare și plasare este utilă singură, dar este și mai utilă atunci când este utilizată împreună cu interacțiunea Droppable, care este descrisă mai jos.

Interacțiunea Draggable este implementată numai prin utilizarea unor stiluri specifice de marcare HTML și CSS. Aceasta înseamnă că această funcționalitate va funcționa în aproape orice browser, dar elementele dotate cu ea nu vor putea funcționa cu instrumente native similare de tip drag-and-drop. sisteme de operare.

Operațiile de tip drag-and-drop definite de specificația HTML5 sunt de obicei implementate folosind mecanismele native ale sistemelor de operare. Dacă utilizați mecanismul de glisare și plasare din jQuery UI, cel mai bine este să dezactivați echivalentele HTML5 pentru a evita conflictele. În acest scop, setați atributul draggable al elementului de corp al documentului la false.

Configurarea interacțiunii prin glisare

Există multe opțiuni de personalizare pentru interacțiunea Draggable. Cele mai importante proprietăți, care sunt discutate în următoarele secțiuni, sunt rezumate în tabelul de mai jos:

Proprietăți de interacțiune care pot fi glisate

Proprietate	Descriere
axă	Limitează mișcarea în direcții specifice. Valoarea implicită este false, ceea ce înseamnă că nu există constrângeri, dar puteți specifica și valoarea „x” (deplasați numai de-a lungul axei X) sau „y” (deplasați doar de-a lungul axei Y)
izolare	Constrânge poziția elementului plutit la o anumită zonă a ecranului. Tipurile de valori acceptate sunt descrise în tabelul de mai jos, folosind exemplul corespunzător. Valoarea implicită este false, ceea ce înseamnă că nu există restricții
întârziere	Stabilește cât timp trebuie să fie tras un element înainte de a se mișca. Valoarea implicită este 0, ceea ce înseamnă că nu există întârziere
distanţă	Determină distanța la care utilizatorul trebuie să tragă un element din poziția sa de pornire înainte ca acesta să se miște efectiv. Valoarea implicită este 1 pixel
grilă	Forțează fixarea elementului mutat în celulele grilei. Valoarea implicită este false, ceea ce înseamnă că nu există nicio legătură

Limitarea direcțiilor de mișcare

Există mai multe moduri prin care puteți restricționa mișcarea unui element în direcții specifice. Prima este să utilizați opțiunea axă pentru a limita direcția de mișcare la axa X sau Y. Un exemplu este prezentat mai jos:

...

Exemplu de rulare

În acest exemplu definim două elemente div, le selectăm cu folosind jQueryși apelați metoda draggable (). Un obiect este transmis acestei metode ca argument, care constrânge inițial mișcarea ambelor div-uri în direcția de-a lungul axei X. Apoi, aplicând metoda jQuery filter (), putem selecta elementul dragV fără jQuery să caute din nou pe tot parcursul documentul și setați-l într-o altă direcție permisă de mișcare - de-a lungul axei Y, ceea ce ne oferă un document în care un div poate fi tras doar vertical și celălalt doar orizontal. Rezultatul este prezentat în figură:

Limitarea intervalului de mișcare a unui element

Puteți, de asemenea, să limitați zona ecranului în care elementul poate fi tras. Opțiunea de izolare este utilizată pentru aceasta. Formatele de valori care pot fi specificate în această opțiune sunt descrise în tabelul de mai jos:

Un exemplu de utilizare a opțiunii de izolare este prezentat mai jos:

...

Exemplu de rulare

În acest exemplu, mișcarea ambelor elemente este limitată, astfel încât acestea pot fi doar târâte în interior element părinte, care este un div de dimensiune fixă. Pentru una dintre div-urile flotabile folosind opțiunea axă introdusă restricție suplimentară, adică se poate deplasa numai orizontal în cadrul elementului părinte. Rezultatul este ilustrat în figură:

Limitarea capacității unui articol de a se muta în celulele grilei

Opțiunea grilă vă permite să setați ancora elementului plutit în celulele grilei. Această opțiune ia ca valoare o matrice de două elemente care definesc lățimea și înălțimea celulelor grilei în pixeli. Un exemplu de utilizare a opțiunii grilă este prezentat mai jos:

...

Exemplu de rulare

Acest exemplu are o grilă cu celule de 100 de pixeli lățime și 50 de pixeli înălțime. Când trageți un element, acesta „sare” de la o celulă (invizibilă) la alta. Efectul de snapping este un exemplu foarte bun de utilizare a funcționalității de interacțiune, dar este dificil de transmis folosind capturi de ecran.

Puteți crea un efect de fixare pentru o singură direcție setând Axa de mișcare liberă la 1. De exemplu, dacă setați opțiunea grilă la o valoare, elementul se va alinia la celulele grilei de 100 de pixeli lățime când este mutat orizontal, dar este liber să se miște pe verticală.

Întârziere mutare

Există două opțiuni care vă permit să întârziați când trageți elementul mutat. Opțiunea de întârziere poate fi folosită pentru a seta perioada de timp, în milisecunde, în care utilizatorul trebuie să tragă mouse-ul înainte ca elementul să fie mutat efectiv. Un alt fel de întârziere este oferit de opțiunea distanță, care determină distanța, în pixeli, pe care utilizatorul trebuie să trage indicatorul mouse-ului înainte ca un element să urmeze.

Un exemplu de utilizare a ambelor setări este prezentat mai jos:

...

Exemplu de rulare

În acest exemplu, există două elemente mobile, dintre care unul are o întârziere specificată folosind opțiunea de întârziere, iar celălalt folosind opțiunea de distanță.

În cazul unei întârzieri specificate de opțiunea de întârziere, utilizatorul trebuie să tragă pentru o anumită perioadă de timp înainte de a muta efectiv elementul. În acest exemplu, durata acestui interval este de 1000 ms. Nu este deloc necesar să mutați mouse-ul în acest moment, dar pe toată perioada de întârziere butonul mouse-ului trebuie să rămână apăsat, după care elementul poate fi mutat prin mișcarea mouse-ului. După ce a trecut timpul de așteptare, elementul care este mutat se va fixa în poziția indicatorului mouse-ului, sub rezerva constrângerilor impuse de opțiunile de grilă, regiune și axă discutate mai devreme.

Opțiunea de distanță are un efect similar, dar în acest caz utilizatorul trebuie să tragă cursorul mouse-ului cel puțin numărul specificat de pixeli în orice direcție de la locația de pornire a elementului. Apoi elementul mutat va sări la locația curentă a indicatorului.

Dacă aplicați ambele setări aceluiași element, atunci elementul mutat nu se va muta până când ambele criterii de întârziere nu sunt îndeplinite, de exemplu. până când se încearcă tragerea elementului pentru timpul specificat și până când cursorul mouse-ului mută numărul specificat de pixeli.

Utilizarea metodelor de interacțiune care pot fi trasate

Toate metodele definite pentru interacțiunile lui Draggable fac parte din setul de bază de metode pe care l-ați văzut deja când vă uitați la widget-uri. Metodele specifice interacțiunii Draggable nu sunt furnizate, așa că nu le vom acoperi în detaliu. Lista metodelor disponibile este prezentată în tabelul de mai jos:

Utilizarea evenimentelor de interacțiune care pot fi glisate

Draggable Interaction acceptă un set simplu de evenimente pentru a notifica când un element este tras. Aceste evenimente sunt descrise în tabelul de mai jos:

Ca și în cazul evenimentelor widget, puteți reacționa și la aceste evenimente. Un exemplu de gestionare a evenimentelor de pornire și oprire este prezentat mai jos:

...

Exemplu de rulare

Acest exemplu utilizează evenimentele de pornire și oprire pentru a modifica conținutul text al unui element pe măsură ce acesta este tras. Această oportunitate se datorează faptului că interacțiunea Draggable este implementată exclusiv folosind HTML și CSS: puteți folosi jQuery pentru a schimba starea unui element plutit chiar și în timp ce acesta se mișcă pe ecran.

Utilizarea interacțiunii droppable

În unele situații, capacitatea de a glisa și plasa un element singur poate fi suficientă, dar este cea mai utilă atunci când este utilizată împreună cu interacțiunea Droppable.

Articolele cărora li s-a aplicat o interacțiune Droppable (articole care primesc) dobândesc capacitatea de a accepta elemente plutitoare create de interacțiunea Draggable.

Elementele care primesc sunt create folosind metoda droppable (). dar pentru a obține funcționalitate utilă va trebui să creați handlere de evenimente dintre cele definite pentru acest tip de interacțiune. Evenimentele disponibile sunt prezentate în tabelul de mai jos:

Evenimente de interacțiune care pot fi eliminate

Eveniment	Descriere
crea	Apare atunci când o interacțiune Droppable este aplicată unui element
Activati	Apare atunci când utilizatorul începe să tragă un element flotant
dezactivați	Apare atunci când utilizatorul nu mai trage un element flotant
peste	Apare atunci când utilizatorul trage elementul plutit peste elementul de primire (dar presupunând că mouse-ul nu a fost eliberat încă)
afară	Apare atunci când utilizatorul trage elementul plutit în afara elementului de primire
cădere brusca	Apare atunci când utilizatorul lasă un flotor pe elementul de primire

Un exemplu de creare a unui element de primire simplu cu un singur handler de evenimente de drop este prezentat mai jos:

...

Exemplu de rulare

Acest exemplu adaugă un element div la document cu conținut text reprezentat de șirul „Leave here”. Selectăm acest element folosind jQuery și apelăm metoda droppable (), trecându-i un obiect de setări care definește un handler pentru evenimentul drop. Răspunsul la acest eveniment este schimbarea textului elementului flotant folosind metoda text ().

Interacțiunea drag-and-drop creată în acest exemplu este foarte simplă, dar oferă un context convenabil pentru explicarea posibilităților. lucrand impreuna interacțiuni Draggable și Droppable. Diferitele etape ale procesului de drag-and-drop sunt ilustrate în figură:

Totul pare foarte simplu. Tragem elementul plutit până când este peste elementul de primire și îl eliberăm. Elementul care este aruncat rămâne acolo unde a fost aruncat, iar conținutul său text se modifică ca răspuns la un eveniment de eliminare. Următoarele secțiuni arată cum să utilizați alte evenimente de interacțiune Droppable pentru a îmbunătăți experiența utilizatorului.

Evidențierea obiectului de primire țintă

Folosind evenimentele de activare și dezactivare, puteți evidenția obiectul de primire țintă atunci când utilizatorul începe procesul de glisare. În multe situații, această idee este foarte fructuoasă, deoarece oferă utilizatorului o indicație fiabilă a elementelor care fac parte din modelul drag-and-drop. Un exemplu relevant este dat mai jos:

... $ (funcție () ($ ("# draggable"). draggable (); $ ("# droppable"). droppable ((drop: function () ($ ("# draggable")). text ("Stânga ")), activați: funcție () ($ ("# droppable"). css ((chenar:" mediu dublu verde ", backgroundColor:" lightGreen "));), dezactivați: funcție () ($ ("# droppable") ") .css (" chenar "," ") .css (" culoare de fundal "," ");)));)); ... Exemplu de alergare

De îndată ce utilizatorul începe să tragă elementul, evenimentul de activare este declanșat - asociat cu elementul nostru de primire, iar funcția de gestionare folosește metoda css () pentru a schimba Proprietățile marginii CSSși culoarea de fundal a acestui element. Ca urmare, elementul de primire țintă este evidențiat, indicând utilizatorului că există o relație între acesta și elementul plutit.

Evenimentul de dezactivare este utilizat pentru a elimina valorile proprietăților CSS din elementul de primire și pentru a-l reseta la starea inițială de îndată ce utilizatorul eliberează butonul mouse-ului. (Acest eveniment are loc ori de câte ori tragerea unui element se oprește, indiferent dacă elementul trasat este păstrat pe elementul de primire sau nu.) Acest proces este ilustrat în figură:

Manipularea elementelor suprapuse

Drag-and-drop poate fi îmbunătățită prin adăugarea de peste și în afara gestionării evenimentelor. Evenimentul de supra-are loc atunci când 50% din elementul plutit se află peste orice parte a elementului receptor. Evenimentul out apare atunci când elementele care se suprapun anterior nu se mai suprapun. Un exemplu de răspuns la aceste evenimente este prezentat mai jos:

$ (funcție () ($ ("# draggable"). draggable (); $ ("# droppable"). droppable ((drop: function () ($ ("# draggable")). text ("Dropped")) , activați: funcție () ($ ("# droppable"). css ((chenar: "mediu dublu verde", backgroundColor: "lightGreen"));), dezactivați: funcția () ($ ("# droppable"). css ("chenar", "") .css ("culoare de fundal", "");), peste: function () ($ ("# droppable"). css ((bord: "mediu dublu roșu", backgroundColor : "roșu"));), afară: funcție () ($ ("# droppable"). css ("chenar", "") .css ("culoarea fundalului", "");)));) ); Exemplu de rulare

Aceleași funcții de gestionare sunt utilizate aici ca în exemplul anterior, dar în acest caz sunt asociate cu evenimentele over și out. Când cel puțin 50% din elementul plutit se suprapune cu elementul de primire, acesta este încadrat și culoarea de fundal se schimbă după cum se arată:

Limita specificată de 50% se numește pragul de toleranță, care poate fi setat atunci când este creat elementul de recepție, așa cum se arată mai jos.

Configurare interacțiune care poate fi eliminată

Droppable are o serie de proprietăți pentru interacțiune pe care le puteți modifica pentru a-și personaliza comportamentul. Aceste proprietăți sunt enumerate în tabelul de mai jos:

Proprietăți de interacțiune care pot fi eliminate

Proprietate	Descriere
dezactivat	Dacă această opțiune este adevărată, atunci funcționalitatea de interacțiune Droppable este inițial dezactivată. Valoarea implicită este false
Accept	Restrânge setul de elemente plutitoare la care elementul receptor va răspunde. Valoarea implicită este *, se potrivește cu orice element
activeClass	Definește o clasă care urmează să fie atribuită ca răspuns la un eveniment de activare și eliminată ca răspuns la un eveniment de dezactivare
hoverClass	Definește o clasă care urmează să fie atribuită ca răspuns la un eveniment over și eliminată ca răspuns la un eveniment out
toleranţă	Specifică gradul minim de suprapunere la care are loc evenimentul de suprapunere

Restricționarea elementelor flotante permise

Puteți restricționa setul de elemente flotabile care vor fi acceptate de un element care are funcționalitatea de interoperabilitate Droppable folosind opțiunea de acceptare. Opțiunea de acceptare ar trebui să fie setată la un selector. Ca urmare a acestui fapt, evenimentele de interacțiune care se pot elimina vor avea loc numai dacă elementul aruncat se potrivește cu selectorul specificat. Un exemplu relevant este dat mai jos:

...

Exemplu de rulare

În acest exemplu, există două elemente flotabile numite drag1 și drag2. La crearea elementului de primire se folosește opțiunea accept, cu care indicăm că doar drag1 va fi un element float acceptabil.

Pe măsură ce glisați drag1, veți vedea același efect ca în exemplele anterioare. Evenimentele de activare, dezactivare, peste și dezactivare se vor declanșa asupra elementului receptor la momentele adecvate. În același timp, dacă trageți un element drag2 care nu se potrivește cu selectorul specificat în parametrul accept, atunci aceste evenimente nu vor fi declanșate. Acest element poate fi mișcat liber, dar nu va fi perceput de elementul de primire.

Observați modificarea modului în care selectați un float acceptabil pentru care ar trebui să apelați metoda text (). Când în document era un singur element mobil, atributul id era suficient pentru asta:

Drop: funcție () ($ ("# dragable"). Text ("Stânga")),

În acest exemplu, există două elemente float, iar selectarea atributului id nu va produce rezultatul dorit, deoarece textul în acest caz se va schimba întotdeauna în același element float, indiferent care este acceptabil pentru elementul receptor.

Ieșirea este să folosiți obiectul ui pe care jQuery UI îl oferă ca argument suplimentar pentru fiecare handler de evenimente. Proprietatea draggable a obiectului ui returnează un obiect jQuery care conține elementul pe care utilizatorul îl trage sau încearcă să îl lase pe elementul țintă, permițând selectarea elementului dorit după cum urmează:

Drop: funcție (eveniment, ui) (ui.draggable.text ("Stânga")),

Modificarea pragului de suprapunere

În mod implicit, evenimentul de depășire se declanșează numai atunci când cel puțin 50% din elementul plutit se suprapune cu elementul de primire. Valoarea acestei suprapuneri de prag poate fi modificată folosind opțiunea de toleranță, care poate prelua valorile prezentate în tabelul de mai jos:

Cele două valori pe care le folosesc cel mai des, fit și touch, sunt cele mai înțelese de utilizatori. Folosesc valoarea de potrivire în cazurile în care elementul tras ar trebui să rămână în zona elementului de primire în care a fost mutat, iar valoarea de atingere - când elementul mutat ar trebui să revină la poziția inițială (un exemplu va fi dat mai jos ). Un exemplu de utilizare a parametrilor de potrivire și atingere este prezentat mai jos:

Valoarea clonului îi spune jQuery UI să creeze o copie a elementului flotant, împreună cu tot conținutul acestuia, și să folosească rezultatul ca element de ajutor. Rezultatul este prezentat în figură:

Ajutorul este eliminat atunci când utilizatorul eliberează butonul mouse-ului deasupra elementului plutit, lăsând elementele plutitoare și de primire în pozițiile lor inițiale.

După cum se arată în figură, elementul plutitor original rămâne pe loc și doar elementul auxiliar se mișcă de-a lungul ecranului urmând indicatorul mouse-ului. Dacă dimensiunile elementului mutat sunt mari, ca în exemplul nostru, atunci acesta acoperă restul elementelor documentului, astfel încât chiar și utilizatorului îi va fi dificil să urmărească poziția elementului de primire. Puteți rezolva această problemă furnizând o funcție ca valoare pentru opțiunea de ajutor, așa cum se arată în exemplul de mai jos:

... $ (funcție () ($ ("div.draggable") .. png "/>")))); $ ("# coș"). droppable ((activeClass: "activ", hoverClass: "hover")); )); ... Exemplu de alergare

Când utilizatorul începe să trage elementul, jQuery UI apelează o funcție, dat de parametru helper și folosește elementul returnat ca float. În acest caz, folosesc jQuery pentru a crea un element img. Rezultatul este prezentat în figură:

Imaginea mică acționează ca un substituent pentru elementul plutitor, făcând mult mai ușoară urmărirea altor elemente din document.

Interfața de utilizare pe care jQuery UI o trimite la evenimentele de interacțiune Droppable conține o proprietate de ajutor, iar această proprietate poate fi utilizată pentru a manipula ajutorul în timp ce este tras. Un exemplu de utilizare a acestei proprietăți împreună cu evenimentele over și out este prezentat mai jos:

... $ (funcție () ($ ("div.draggable") .. png "/>")))); $ ("# coș"). droppable ((activeClass: "activ", hoverClass: "hover", peste: funcție (eveniment, ui) (ui.helper.css ("chenar", "gros solid # 27e6ed")) , out: funcție (eveniment, ui) (ui.helper.css ("border", "")))); )); ...

Aici, evenimentele over and out și proprietatea ui.helper sunt folosite pentru a afișa un chenar în jurul helperului atunci când acesta se suprapune cu elementul de primire. Rezultatul este prezentat în figură:

Fixați la marginile elementelor

Prin intermediul opțiuni snap poți realiza ca elementul mutat să fie „atras” de marginile elementelor pe lângă care trece. Această opțiune ia un selector ca valoare. Elementul plutit se va fixa pe marginile oricărui element care se potrivește cu selectorul specificat. Un exemplu de utilizare a opțiunii snap este prezentat mai jos:

Exemplu de rulare

Atunci când elementul mutat se apropie de unul dintre elementele potrivite, acesta este, parcă, „atras” de acesta în așa fel încât marginile lor adiacente să se atingă. Pentru o astfel de legare, puteți selecta orice element, nu doar cel de primire. În acest exemplu, am adăugat un element div și am setat opțiunea snap la o valoare care selectează elementul dat din document, precum și elementul de primire.

Există câteva opțiuni de ajutor care vă permit să reglați fin comportamentul de legare al elementelor. Unul dintre ei este opțiunea snapMode... Poate fi folosit pentru a specifica tipul de legare. Sunt permise următoarele valori: interior(fixarea la marginile interioare ale elementelor), exterior(aprinderea la marginile exterioare ale elementelor) și ambii(se fixează pe toate marginile; implicit).

Opțiunea SnapTolerance vă permite să specificați cât de departe ar trebui să se apropie elementul plutit de marginea elementului țintă înainte de a se produce fixarea. Valoarea implicită este 20, ceea ce înseamnă 20 de pixeli. Exemplul folosește o valoare de 50, care corespunde unei snapping la o distanță mai mare. Este foarte important să selectați valoarea corectă pentru această opțiune. Dacă valoarea snapTolerance este prea mică, este posibil ca utilizatorul să nu observe efectul de snap, iar dacă este prea mare, elementul mutat va începe să facă salturi neașteptate, fixându-se la elementele îndepărtate.

Pentru biblioteca VCL, Borland a implementat propria versiune a interfeței Drag & Drop (tradusă ca „drag and drop”). Această interfață este internă - puteți trimite și primi orice elemente de control Delphi în interiorul formularului "(cu excepția formularului în sine). Este implementată fără a utiliza funcțiile API Windows corespunzătoare - acestea trebuie utilizate la organizarea comunicării cu alte sarcini prin glisare și căzând.

Apăsând butonul stâng al mouse-ului peste control, îl putem „trage” pe orice alt control. Din punctul de vedere al programatorului, asta înseamnă că în momentele de tragere și eliberare a unei taste sunt generate anumite evenimente care transmit toate informațiile necesare - un pointer către obiectul trasat, coordonatele curente ale cursorului etc. acest moment cursorul este localizat. Managerul pentru un astfel de eveniment ar trebui să spună sistemului dacă controlul dat acceptă o „trimitere” sau nu. Când butonul este eliberat peste comanda de recepție, sunt generate încă unul sau două evenimente, în funcție de pregătirea receptorului.

Anulați Trageți Anulează operația curentă de glisare și plasare sau de tragere și andocare.

Funcția FindDragTarget (const Pos: TPoint; AllowDisabled: Boolean): TControl;

Funcția returnează un obiect din clasa de bază TControl , căruia îi aparține poziția ecranului cu coordonatele specificate de parametrul Pos. Această funcție este utilizată pentru a determina destinatarul potențial al unei operațiuni de glisare și plasare sau de tragere și andocare. Dacă nu există control de fereastră pentru poziția specificată, atunci funcția revine zero ... Parametrul AllowDisabled determină dacă obiectele dezactivate sunt numărate.

Funcția IsDragObject (Sender: TObject): Boolean;

Funcția determină dacă obiectul specificat în parametrul Sender este un descendent al clasei TDragObject . Această funcție poate fi folosit ca parametru Sursă în handlerele de evenimente OnDragOver și OnDockOver pentru a determina dacă obiectul trasat va fi acceptat. De asemenea, funcția IsDragObjectpoate fi folosit ca parametru Sursă în handlerele de evenimente OnDragDrop și OnDockDrop pentru a interpreta corect obiectul tras.

DragMode, proprietăți DragCursor, BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, metode OnStartDrag, Accept parametru

Procesul de glisare și plasare a informațiilor de la un obiect la altul este utilizat pe scară largă în Widows. Puteți muta fișiere între foldere, puteți muta foldere și multe altele.

Toate proprietățile, metodele și evenimentele asociate cu procesul de glisare și plasare sunt definite în clasa TControl, care este părintele tuturor componentelor vizuale Delphi. Prin urmare, ele sunt comune tuturor componentelor.

Începutul tragerii este determinat de proprietatea DragMode, care poate fi setată la momentul proiectării sau egală din punct de vedere programatic cu dmManual sau dmAutomatic. Valoarea dmAutomatic (automat) determină dacă procesul de glisare și plasare începe automat când utilizatorul face clic cu mouse-ul peste o componentă. Cu toate acestea, în acest caz, evenimentul OnMouseDown asociat cu utilizatorul care face clic pe butonul mouse-ului nu are loc deloc pentru această componentă.

Interfața pentru transferul și primirea componentelor a apărut cu mult timp în urmă. Permite două comenzi să interacționeze în timp ce aplicația rulează. În acest caz, pot fi efectuate orice operațiuni necesare. În ciuda simplității implementării și a epocii dezvoltării, mulți programatori (în special începătorii) consideră acest mecanism obscur și exotic. Cu toate acestea, folosirea trageți și plasați poate fi foarte utilă și ușor de implementat. Acum ne vom convinge de asta.

Pentru ca mecanismul să funcționeze, două comenzi trebuie configurate corespunzător. Unul trebuie să fie Sursa, celălalt Ținta. În acest caz, sursa nu se mișcă nicăieri, ci este doar înregistrată ca atare în mecanism.

Crede-mă, este suficient să te convertești Coordonatele X, Y a trecut în parametrii evenimentelor OnDragOver și OnDragDrop la coordonatele formularului.

Lucrați cu proprietățile Left și Top ale componentei peste care trece cursorul. Permiteți-mi să vă dau un exemplu simplu. Plasați o componentă Memo pe formular și setați proprietatea Align la alTop. Plasați un panou pe formă, setați și proprietatea Align la alTop și setați proprietatea Height la o valoare mică, să zicem 6 sau 7 pixeli. Setați DragMode la dmAutomatica și DragCursor la crVSplit. Plasați o altă componentă Memo și setați Align la alClient. Selectați ambele componente Memo în același timp, panoați și creați un handler de evenimente comun pentru evenimentul OnDragOver, așa cum se arată mai jos:

Recent mi-a venit o idee să încep să dezvolt un joc pentru Android. Pentru început, am decis să scriu șah. Mi s-a părut tehnologie Tragere și plasare perfect pentru implementarea unui mecanism de mutare a formelor. Pentru cei neinițiați, notez că metoda drag and drop esteîn capacitatea de a trage unele obiecte grafice pe altele și de a efectua o acțiune după eliberare. Cel mai simplu exemplu- eliminarea unei comenzi rapide de pe desktopul computerului dvs. trăgând-o în coșul de gunoi. „Aruncând” o comandă rapidă în coșul de gunoi, îi spunem sistemului că vrem să forțăm aceste două obiecte să interacționeze. Sistemul primește semnalul nostru și decide ce acțiune să întreprindă. Drag and drop a devenit larg răspândit datorită clarității sale intuitive. Această abordare este susținută de experiența noastră cu obiectele din lumea reală și funcționează excelent într-un mediu virtual. În ceea ce privește șahul, folosind drag and drop este mai ușor din punct de vedere tehnologic să se determine celula în care utilizatorul a tras piesa, deoarece nu este nevoie să se calculeze numărul celulei după coordonatele punctului de drop. Această lucrare va fi preluată de o mașină virtuală.

Scopul utilizării tehnologiei Drag n Drop

Folosirea tehnologiei drag and drop îmi permite să rezolv trei probleme cu puțin sânge:

1. Vizualizarea cursului. Când utilizatorul atinge o formă și începe să o miște pe ecran, forma este înlocuită cu un desen mai mic. Astfel, utilizatorul înțelege că cifra este surprinsă.
2. Am limitat aria de mișcare a formei la dimensiunea plăcii.
3. Dacă utilizatorul a eliberat forma în locul greșit, aceasta ar trebui să revină la poziția inițială.

Sarcinile sunt conturate, să trecem la implementarea lor.

Schimbați ImageView la atingere

Toate formele mele sunt obiecte ImageView. Din păcate, s-a dovedit că implementarea Drag & Drop în Android nu permite „out of the box” să înlocuiască imaginea unui obiect atunci când este atins. Cu toate acestea, această sarcină este destul de rezolvabilă prin intermediul API-ului. Trebuie să parcurgem o serie de pași simpli:

1. Creați un obiect DragShadowBuilder.
2. Apelați metoda startDrag.
3. Ascundeți ImageView-ul nostru care afișează forma apelând metoda setVisibility cu parametrul View.INVISIBLE. Ca urmare, doar obiectul DragShadowBuilder va rămâne pe ecran, ceea ce va semnala utilizatorului să apuce forma.

Acești pași trebuie implementați în handlerul OnTouchListner al ImageView. Pentru a face acest lucru, vom suprascrie metoda onTouch:

@ Ignorați onTouch boolean public (Vizualizare vizualizare, MotionEvent motionEvent) (dacă (motionEvent. GetAction () == MotionEvent. ACTION_DOWN) (ClipData clipData = ClipData. NewPlainText ("", ""); Vizualizare. DragShadowBuilder dsb = vizualizare nouă. DragShadowBuilder (vizualizare); vizualizare. startDrag (clipData, dsb, vizualizare, 0); vizualizare. setVisibility (Vizualizare. INVIZIBIL); return true;) else (return false;))

Totul este foarte simplu. Deci, ne-am dat seama de înlocuirea imaginii, să trecem la următoarea sarcină.

Limitarea zonei de glisare pentru funcția de glisare

Există o problemă cu limitarea zonei de tragere. Ideea este că, dacă aruncați forma în afara tablei, evenimentul de drop nu se va întâmpla, deoarece utilizatorul a aruncat obiectul de la zero și obiectul nu are cu ce să interacționeze. Drept urmare, figura nu va reveni la starea inițială și va rămâne ascunsă pentru totdeauna. Am petrecut mult timp citind documentația, dar încă nu am găsit o modalitate de a limita intervalul de glisare a obiectelor. Inspirația a venit brusc. Nu trebuie să constrâng deloc zona, trebuie să știu dacă utilizatorul a eliberat corect forma sau nu.

Determinarea eliberării corecte
Am găsit răspunsurile la întrebările mele în secțiunea „Gestionarea evenimentelor de terminare cu drag” a site-ului pentru dezvoltatori Android. Iată câteva puncte cheie:

1. Când utilizatorul termină de trage, evenimentul ACTION_DRAG_ENDED este declanșat în handlerul DragListeners.
2. În DragListener, puteți obține informații mai detaliate despre operația de glisare apelând metoda DragEvent.getResult ().
3. Dacă DragListener returnează true ca răspuns la evenimentul ACTION_DROP, apelul getResult va returna și true, în caz contrar, false.

Astfel, trebuie să interceptez evenimentul ACTION_DRAG_ENDED și să apelez metoda getResult. Dacă se întoarce fals, atunci utilizatorul a tras forma de pe tablă și trebuie să pun ImageView în modul vizibil.

@ Ignorați public boolean onDrag (Vizualizare vizualizare, DragEvent dragEvent) (int dragAction = dragEvent. GetAction (); View dragView = (Vizualizare) dragEvent. GetLocalState (); if (dragAction == DragEvent. ACTION_DRAG_EXITED) (containsDragable = false;) else if (dragAction == DragEvent. ACTION_DRAG_ENTERED) (containsDragable = true;) else if (dragAction == DragEvent. ACTION_DRAG_ENDED) (if (dropEventNotHandled (dragEvent)) (dragView. setVisibility (View. VISIBLE);)) else if (dragAction) = DragEvent. ACTION_DROP & amp; & amp; containsDragable) (checkForValidMove ((ChessBoardSquareLayoutView) view, dragView); dragView. SetVisibility (View. VISIBLE);) return true;) private boolean dropEventNotHandled (DragEvent dragEvent) (return); )

Acum utilizatorul poate elibera figura oriunde și nu se va întâmpla nimic groaznic.

Determinarea mișcărilor permise

Ultima parte a articolului este dedicată verificării validității mișcării pe care utilizatorul încearcă să o facă. Înainte de a începe să discut acest subiect în detaliu, voi face o mică remarcă în care explic structura aplicației mele. Tabla de șah este reprezentată ca un TableLayout, iar fiecare celulă este un descendent al unui LinearLayout și are un OnDragListener.

În plus, fiecare OnDragListener se referă la un obiect mediator care se ocupă de interacțiunea obiectelor de joc și își amintește poziția celulei curente.

Când utilizatorul trage o piesă peste o cușcă, sunt posibile următoarele acțiuni:

1. Folosind evenimentul ACTION_DRAG_ENTERED pentru a seta variabila „containsDraggable” la adevărat.
2. Folosind evenimentul ACTION_DRAG_EXITED pentru a seta variabila „containsDraggable” la fals.
3. Folosind evenimentul ACTION_DROP pentru a întreba brokerul dacă este permis să plaseze o cifră în această celulă.

Mai jos este codul care implementează logica descrisă

@ Ignorați public boolean onDrag (Vizualizare vizualizare, DragEvent dragEvent) (int dragAction = dragEvent. GetAction (); View dragView = (Vizualizare) dragEvent. GetLocalState (); if (dragAction == DragEvent. ACTION_DRAG_EXITED) (containsDragable = false;) else if (dragAction == DragEvent. ACTION_DRAG_ENTERED) (containsDragable = true;) else if (dragAction == DragEvent. ACTION_DRAG_ENDED) (if (dropEventNotHandled (dragEvent)) (dragView. setVisibility (View. VISIBLE);)) else if (dragAction) = DragEvent. ACTION_DROP & amp; & amp; containsDragable) (checkForValidMove ((VizualizareChessBoardSquareLayoutView), dragView); dragView. SetVisibility (Vizualizare. VIZIBLE);) return true;)

După cum puteți vedea, indiferent dacă mutarea este legală sau nu, ImageView este setat la o stare vizibilă. Am vrut ca utilizatorul să vadă forma în mișcare. Am menționat mai devreme că celula este un descendent al LayoutView. Acest lucru se face pentru a facilita mutarea ImageView-ului de la o celulă la alta. Mai jos este codul pentru metoda checkForValidMove care arată cum se mișcă ImageView.

private void checkForValidMove (vedere ChessBoardSquareLayoutView, View dragView) (dacă (mediator. isValidMove (view)) (ViewGroup owner = (ViewGroup) dragView. getParent (); proprietar. removeView (dragView); view. addView (dragView); view. setGravity (Gravatate. CENTRUL); vizualizare. ShowAsLanded (); mediator. HandleMove (vizualizare);))

Sper că acest articol vă va ajuta să vă dezvoltați propriile proiecte.