Lakše je nešto uzeti i staviti nego pisati šta treba da uzmeš i gde da staviš. Naravno, bez miša, ili sličnog uređaja, ne možete ništa odabrati ili specificirati, ali čak i u trenutnom stanju stvari, korištenje drag and drop ideje je vrlo prirodno i udobno.

Opseg ideje nisu samo online prodavnice, digitalne biblioteke, pretraga odn informacioni sistemi, ali i primijenjenu oblast. Ideja je vrlo primenljiva u razvoju sajtova i njihovih elemenata, kreiranih i održavanih interaktivno, bez učešća programera.

Opis ideje

Odaberite, premjestite i postavite - ideja je prirodna i zgodna. Prosto je nevjerovatno da nije nastao kada je miš postao nezamjenjiv dodatak za kompjuter.

Najočitiji primjer je odabir proizvoda u online trgovini. Odaberite željeni proizvod mišem i prevucite ga u korpu za kupovinu - jednostavno, prirodno i povoljno. Učitavanje datoteke: Iznošenje dokumenta izvan prozora pretraživača i postavljanje na element stranice, čime se pokreće prijenos dokumenta na server, također je praktična ideja.

Za programera, ideja "drag and drop" je manipulacija elementima stranice bez ručnog ponovnog izračunavanja koordinata i veličina oznaka, mogućnost odabira više elemenata i njihovog poravnanja, te pomicanja stranica blok oznaka.

HTML i CSS - sjajni jezici opise oznaka i njihovih stilova dizajna, ali kada programer ima mogućnost da interaktivno manipuliše elementima stranice bez ručnog ponovnog izračunavanja koordinata i veličina, to čini rad ugodnijim i efikasnijim.

Jednostavan prijenos datoteka

"Povuci i ispusti": prijevod s engleskog na ruski doslovno zvuči kao "povuci i ispusti". U praksi to zvuči i funkcionira bolje: izabrati, prenijeti i pustiti - jednostavno i prirodno.

Implementacija prijenosa datoteka sa stranice na stranicu, na server ili za drugu upotrebu je vrlo jednostavna.

U ovom primjeru, nekoliko datoteka na radnoj površini je odabrano pomoću miša (lijeva slika). Prilikom odabira, pritisnuto je lijevo dugme miša i odabrani je "otišao" u korpu. Sam pretraživač je pokazao kako se to dešava, napisao je nagoveštaj za „kopiranje“ i kreirao obrise datoteka koje se pomeraju.

Kada je miš bio iznad korpe, posetilac je pustio levi taster miša, desio se događaj prevlačenja i ispuštanja i na stranici sajta (donja slika) JavaScript kod je mogao da primi i obradi sve fajlove koje je posetilac pružio stranica (stranica).

Opis implementacije

Kod koji izvodi ovu proceduru je vrlo jednostavan. Čak i početnik programer može to ponoviti u svim slučajevima upotrebe.

Ovdje je korisnički interfejs predstavljen sa dvije oznake: scPlaceFile (ovo je sama korpa u koju želite da stavite datoteke) i scPlaceFiles (ovo je rezultat obrade datoteka, u ovom slučaju njihova lista).

Logika stranice je sljedeća. Kada se stranica učita u pretraživač, rukovalac događaja "ondrop" se dodeljuje u korpu - stavi, ostali događaji se blokiraju i ne koriste.

Stranica radi normalno, ali čim posjetitelj odabere datoteku (fajlove) i prevuče ih na sliku korpe, odnosno u oznaku scPlaceFile, obradiće se događaj „fajlovi su stigli“.

Ovaj obrađivač jednostavno prikazuje listu datoteka. Njihov broj je u event.dataTransfer.files.length, a informacije o svakoj datoteci su u event.dataTransfer.files[i].name. Što učiniti s primljenim podacima određuje programer, u ovom slučaju jednostavno se formira lista primljenih datoteka.

Jednom obrađen, događaj se blokira i ne širi. Ovo je neophodno kako se pretraživač ne bi bavio amaterskim aktivnostima i ne bi ometao obradu primljenih informacija.

DnD i eksterni podaci

Učitavanje slika na server u "drag and drop" je uobičajena praksa u ovoj tehnologiji. Tipično, programer kreira obrazac za otpremanje datoteke (1) koji radi na uobičajeni način (2). Posjetilac može normalan način rada odaberite fajlove i otpremite ih.

Međutim, ako posjetitelj povuče i spusti na određeno mjesto u obrascu, tada će se polje za naziv datoteke (fajlovi) automatski popuniti.

Ovo dobra odluka. Naravno, veoma je teško priznati da na računaru nema miša. Ali bolje je razviti korisnički interfejs na uobičajen način iu DnD implementaciji.

DnD i interni podaci

Briga o interesima posjetitelja uvijek je važna, ali su bitne i brige programera. Možete implementirati "drag and drop" ne samo standardnim sredstvima, već i rukovanjem događajima miša na elementima stranice.

Zadatak izračunavanja vrijednosti koordinata oznake i njihovih veličina javlja se stalno. Ručno izračunavanje je dobra praksa, ali interaktivna opcija je praktičnija. Sve oznake su uvijek pravokutnog oblika, a praćenjem događaja miša na bočnim stranama elemenata, možete kreirati mogućnost automatskog premještanja elemenata na pravo mjesto na stranici ili njihovog mijenjanja.

Rukovanje događajem klika na dugme miša - pamćenje koordinata lokacije klika, na primjer, jedne od strana elementa. Pomicanje miša - strana se pomiče u željenom smjeru. Otpuštanje tipke miša - strana se zaustavlja i njene koordinate se mijenjaju. Na ovaj način možete promijeniti položaj elementa ili njegovu veličinu.

To nije formalno drag and drop, ali efekat je sličan i praktičan. Pravljenjem univerzalnih rukovaoca za bilo koji element stranice, možete dobiti dobar interaktivni rezultat, ubrzati razvoj i pojednostaviti kod.

Vizuelno i ručno programiranje

Miš na računaru i prsti na pametnom telefonu potpuno su različiti pristupi implementaciji korisničkog interfejsa (posetilac, programer). To je potpuno prirodan i moderan zahtjev za kompatibilnost među pretraživačima.

Sve ovo zajedno otežava kreiranje stranica, ali primjenom ideje povuci i ispusti u njoj standardni obrazac, koristeći svoje događaje, kombinirajući ovu ideju sa uobičajenim događajima na elementima, možete implementirati mehanizam u kojem će se kreiranje stranice odvijati vizualno.

Pogledajmo sada odabir elementa ili elemenata. Činjenica odabira - izgled kontekstnog menija, na primjer, cilj je poravnati odabrani (lijevo, desno, centar), ili rasporediti elemente vertikalno ili horizontalno sa istim korakom, ili promijeniti njihovu veličinu (minimalna, maksimalna).

Automatsko preračunavanje koordinata i dimenzija je poželjnije od ručnog. Manje grešaka - brže se dolazi do cilja. Osim toga, možete napraviti stranicu u jednom pretraživaču, sačuvati poziciju i veličinu elemenata. Otvaranjem ove stranice na pametnom telefonu možete ispraviti koordinate i dimenzije i zapamtiti ih specifičan model verzija pametnog telefona ili pretraživača.

Dakle, ista stranica bez ručne usklađenosti sa zahtjevom kompatibilnosti među pretraživačima imat će različite podatke za prikaz na razni uređaji i u različitim pretraživačima.

Ako posjetitelju omogućite da samostalno izvrši ove postupke, kao i da odabere potrebne elemente stranice među onima koje je dao programer, moguće je osigurati kompatibilnost među pretraživačima i potrebnu funkcionalnost stranice, uzimajući u obzir mišljenje korisnika.

Funkcija Drag and Drop može pomoći u poboljšanju performansi vašeg iPada. Evo kako ga možete koristiti.

Dakle, možete premjestiti datoteku s jedne usluge pohrane u oblaku na drugu, kopirati tekst iz Safarija u aplikaciju za uređivanje teksta da dodate citat ili kreirate backup određene fotografije u aplikaciji za pohranu datoteka.

Kako prevući i ispustiti fotografije, datoteke i tekst

1. Dodirnite i držite fotografiju, datoteku ili istaknuti tekst koji želite prevući u drugu aplikaciju.

2. Prevucite element na željenu lokaciju ovu aplikaciju ili neki drugi koji ste otvorili u Slide Over ili Split View i otpustite.

Kako prevući i ispustiti više fotografija ili datoteka odjednom

1. Dodirnite i držite jednu od fotografija ili datoteka koje želite da prevučete.

2. Dok prevlačite trenutnu stavku, dodirnite drugu fotografiju ili datoteku koju takođe želite da prevučete. Uradite to ponovo sa onoliko elemenata koliko želite da pomerite.

3. Prevucite sve odabrane objekte na određeno mjesto u drugoj aplikaciji koju ste otvorili u prikazu Slide Over ili Split View i otpustite ih.

Kako prevući tekst iz jedne aplikacije u drugu

1. Dodirnite i držite dio teksta koji želite prevući da biste ga odabrali.

2. Koristite tačke odabira da označite ostatak teksta koji želite da prevučete.

3. Pritisnite i držite odabrani tekst.

4. Prevucite tekst u aplikaciju gdje ga želite postaviti i otpustite ga.

Kako promijeniti položaj ikona nekoliko aplikacija odjednom koristeći "Drag and Drop"

Dok većina iOS funkcija prevlačenja i ispuštanja radi samo na iPadu, ovaj trik zapravo radi i na iPhoneu i iPadu. Ovo vam omogućava da organizirate lokaciju aplikacija na početnom ekranu pomoću « Povucite i ispustite" umjesto da ih pomjerate jednu po jednu.

1. Dodirnite i držite ikonu aplikacije koju želite premjestiti na početnom ekranu.

2. Dodirnite dodatne aplikacije koje također želite premjestiti.

3. Prevucite ove aplikacije na stranicu ili mapu gdje želite da budu i ispustite ih.

182

U ovom primjeru odabiremo div element i činimo ga pokretnim tako što ga pozivamo draggable() metoda. Kao što je prikazano na donjoj slici, u otvorenom dokumentu element zauzima svoj uobičajeni položaj, ali se nakon toga može pomjeriti pokazivačem miša na bilo koje mjesto u prozoru pretraživača:

Funkcija prevlačenja i ispuštanja korisna je sama po sebi, ali je još korisnija kada se koristi u kombinaciji sa interakcijom koja se može ispustiti, koja je opisana u nastavku.

Interakcija koja se može prevući se implementira isključivo upotrebom specifičnih HTML oznaka i CSS stilova. To znači da će ova funkcionalnost raditi u gotovo svakom pretraživaču, ali elementi koji su njome opremljeni neće moći raditi sa sličnim izvornim drag-and-drop objektima. operativni sistemi.

Operacije prevuci i ispusti definisane HTML5 specifikacijom obično se implementiraju korišćenjem mehanizama izvornog operativnog sistema. Ako koristite jQuery UI mehanizam drag-and-drop, najbolje je onemogućiti HTML5 ekvivalente kako biste izbjegli sukobe. Da biste to učinili, postavite atribut koji se može prevući elementa tijela dokumenta na false.

Prilagođavanje interakcije koja se može povući

Postoji mnogo opcija prilagođavanja za interakciju koja se može prevući. Najvažnija svojstva obuhvaćena u sljedećim odjeljcima sažeta su u donjoj tabeli:

Svojstva interakcije koja se mogu povući

Nekretnina	Opis
osa	Ograničava kretanje u određenim smjerovima. Zadana vrijednost je false, što znači da nema ograničenja, ali također možete odrediti vrijednost "x" (kretati se samo duž x-ose) ili "y" (kretati se samo duž y-ose)
zadržavanje	Ograničava lokaciju plutajućeg elementa na određeno područje ekrana. Podržani tipovi vrijednosti opisani su u donjoj tabeli, s odgovarajućim primjerom. Zadana vrijednost je lažna, što znači da nema ograničenja
kašnjenje	Određuje koliko vremena element mora biti povučen prije nego što se pomakne. Zadana vrijednost je 0, što znači da nema kašnjenja
razdaljina	Određuje udaljenost koju korisnik mora povući element sa njegove početne pozicije prije nego što se stvarno pomakne. Zadana vrijednost je 1 piksel
grid	Prisiljava vezivanje pomaknutog elementa za ćelije mreže. Zadana vrijednost je false, što znači da nema vezivanja

Ograničenje pravaca kretanja

Postoji nekoliko načina na koje možete ograničiti kretanje elementa u određenim smjerovima. Prvi od njih je korištenje opcije osi, koja vam omogućava da ograničite smjer kretanja na os X ili Y. Primjer je prikazan ispod:

...

Pokreni primjer

U ovom primjeru definiramo dva elementa div, odabiremo ih pomoću jQuery i pozovite metodu draggable(). Ovoj metodi se prosljeđuje objekt koji inicijalno ograničava oba diva da se kreću duž x-smjera. Tadam primjenom metode jQuery filter() možemo odabrati dragV element bez da jQuery ponovo pretražuje cijeli dokument i podesiti ga na drugi dozvoljeni pokret smjer - duž ose Y. Tako dobijamo dokument u kojem se jedan div element može povlačiti samo u vertikalnom smjeru, a drugi - samo u horizontalnom smjeru. Rezultat je prikazan na slici:

Ograničavanje dozvoljene površine za pomicanje elementa

Također možete ograničiti područje ekrana gdje možete prevući element. Za to se koristi opcija zadržavanja. Formati vrijednosti koji se mogu specificirati u ovoj opciji opisani su u donjoj tabeli:

Primjer korištenja opcije zadržavanja prikazan je u nastavku:

...

Pokreni primjer

U ovom primjeru, oba elementa su ograničena da se kreću na takav način da se mogu samo povući unutra roditeljski element, koji je div element fiksne veličine. Za jedan od pokretnih div-ova s ​​upisanom opcijom osi dodatno ograničenje, što znači da se može kretati samo horizontalno unutar roditeljskog elementa. Rezultat je ilustrovan na slici:

Ograničavanje mogućnosti premještanja elementa u ćelije mreže

Opcija mreže vam omogućava da postavite vezivanje pomjerenog elementa za ćelije mreže. Ova opcija prihvata niz od dva elementa koji specificiraju širinu i visinu ćelija mreže u pikselima. Primjer korištenja opcije mreže prikazan je u nastavku:

...

Pokreni primjer

U ovom primjeru, mreža je postavljena na 100 piksela širine i 50 piksela visine. Kada prevučete element, on "skače" iz jedne (nevidljive) ćelije u drugu. Efekat snappinga je odličan slučaj upotrebe za funkcionalnost interakcije, ali ga je teško prenijeti snimcima ekrana.

Možete kreirati efekat hvatanja samo u jednom smjeru postavljanjem osi slobodnog kretanja na 1. Na primjer, ako postavite opciju mreže na , element će skočiti na ćelije mreže širine 100px kada se kreće horizontalno, ali će se slobodno kretati okomito .

Odgoda putovanja

Postoje dvije opcije koje vam omogućavaju da odgodite prevlačenje plutajućeg elementa. Sa opcijom odgode, možete postaviti vrijeme u milisekundama koje korisnik mora povući pokazivačem miša prije nego što se element stvarno pomjeri. Druga vrsta kašnjenja je omogućena opcijom distance, koja specificira udaljenost, u pikselima, koju korisnik mora povući pokazivačem miša prije nego što element slijedi.

Primjer korištenja obje postavke prikazan je u nastavku:

...

Pokreni primjer

U ovom primjeru postoje dva plutajuća elementa, od kojih jedan ima odgodu postavljenu opcijom odgode, a drugi s opcijom udaljenosti.

U slučaju kašnjenja specificiranog opcijom kašnjenja, korisnik mora povući određeno vrijeme prije nego što stvarno pomjeri element. U ovom primjeru, trajanje ovog jaza je 1000 ms. Za to vreme nije potrebno pomerati miš, ali taster miša mora ostati pritisnut tokom čitavog perioda odlaganja, nakon čega se element može pomerati pomeranjem miša. Nakon što vrijeme kašnjenja protekne, element koji se pomiče će se zakačiti na poziciju pokazivača miša, podložno ograničenjima koja nameću opcije mreže, regije i osovine o kojima smo ranije raspravljali.

Opcija udaljenosti ima sličan učinak, ali u ovom slučaju korisnik mora povući pokazivač miša najmanje određeni broj piksela u bilo kojem smjeru od početne lokacije elementa. Stavka koja se premješta tada će skočiti na trenutnu lokaciju pokazivača.

Ako obje postavke primijenite na isti element, tada se element koji se premješta neće pomicati dok se ne ispune oba kriterija kašnjenja, tj. sve dok pokušaj prevlačenja elementa traje određeno vrijeme i dok pokazivač miša ne pomjeri određeni broj piksela.

Korištenje metoda interakcije koje se mogu povući

Sve metode definisane za interakciju koja se može prevući su deo skupa osnovnih metoda koje ste već videli u widgetima. Metode specifične za Draggable interakciju nisu navedene, tako da ih nećemo detaljno pokrivati. Spisak dostupnih metoda prikazan je u tabeli ispod:

Korištenje događaja interakcije koji se mogu povući

Interakcija koja se može prevući podržava jednostavan skup događaja koji obavještavaju kada se element prevlači. Ovi događaji su opisani u tabeli ispod:

Kao i kod widget događaja, na ove događaje se također može reagirati. Primjer rukovanja događajima početka i zaustavljanja prikazan je u nastavku:

...

Pokreni primjer

Ovaj primjer koristi događaje početka i zaustavljanja za promjenu tekstualnog sadržaja elementa tokom procesa prevlačenja. Ova prednost dolazi iz činjenice da je Draggable interakcija implementirana u potpunosti koristeći HTML i CSS: možete koristiti jQuery da promijenite stanje plutajućeg elementa čak i dok se kreće po ekranu.

Korištenje interakcije koja se može ispustiti

U nekim situacijama, samo prevlačenje elementa može biti dovoljno, ali je najkorisnije kada se koristi u kombinaciji s interakcijom koja se može ispustiti.

Elementi na koje je primijenjena interakcija koja se može ispustiti (prihvatanje elemenata) dobijaju mogućnost prihvatanja elemenata koji se mogu ispustiti kreiranih interakcijom koja se može prevući.

Prijemni elementi se kreiraju sa dropable() metoda, ali da biste dobili korisnu funkcionalnost, morat ćete kreirati rukovaoce događajima između onih definiranih za ovu vrstu interakcije. Dostupni događaji prikazani su u tabeli ispod:

Događaji interakcije koji se mogu odbaciti

Događaj	Opis
stvoriti	Pojavljuje se kada se na element primjenjuje interakcija koja se može ispustiti
aktivirati	Javlja se kada korisnik počne povlačiti plutajući element
deaktivirati	Javlja se kada korisnik prestane da povlači plutajući element
gotovo	Pojavljuje se kada korisnik prevuče plutajući element preko elementa koji prima (ali pod pretpostavkom da tipka miša još nije otpuštena)
van	Javlja se kada korisnik povuče plutajući element izvan elementa koji prima
drop	Javlja se kada korisnik ostavi plutajući element na elementu koji prima

Primjer kreiranja jednostavnog elementa primanja koji ima jedan rukovalac događaja ispuštanja je dat u nastavku:

...

Pokreni primjer

U ovom primjeru, element div je dodan dokumentu, čiji je tekstualni sadržaj predstavljen nizom "Ostavi ovdje". Odabiremo ovaj element koristeći jQuery i pozivamo metodu droppable(), prosljeđujući joj objekt postavki koji definira rukovao za događaj ispuštanja. Odgovor na ovaj događaj je promjena teksta plutajućeg elementa pomoću metode text().

Interaktivno iskustvo povuci i ispusti kreirano u ovom primjeru je najjednostavnije, ali pruža koristan kontekst za objašnjenje mogućnosti. zajednički rad Interakcije koje se mogu prevući i ispustiti. Različite faze procesa prevlačenja i ispuštanja elemenata su ilustrovane na slici:

Sve ovo izgleda veoma jednostavno. Povlačimo element koji se pomiče dok se ne nađe iznad prijemnog elementa i puštamo ga. Ispušteni element ostaje tamo gdje je ostavljen, a njegov tekstualni sadržaj se mijenja kao odgovor na pojavu događaja ispuštanja. Sljedeći odjeljci vam pokazuju kako koristiti druge događaje interakcije koje se mogu ispustiti za poboljšanje korisničkog iskustva.

Istaknuti objekat koji prima cilj

Koristeći događaje aktiviranja i deaktiviranja, možete istaknuti ciljni objekat primanja kada korisnik započne proces prevlačenja elementa. U mnogim situacijama ova ideja je vrlo plodonosna jer korisniku daje pouzdanu indikaciju o tome koji elementi su dio modela drag-and-drop. Relevantan primjer je prikazan u nastavku:

... $(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#draggable").text("Dropped ") ), aktivirajte: function() ( $("#droppable").css(( granica: "srednja dvostruko zelena", boja pozadine: "lightGreen" )); ), deaktivirajte: function() ( $("#droppable ").css("border", "").css("background-color", ""); ) )); )); ... Pokrenite primjer

Čim korisnik počne povlačiti element, aktivira se događaj aktivacije - povezan s našim elementom koji prima, a funkcija rukovatelja koristi metodu css() za promjenu CSS granica svojstva i boja pozadine ovog elementa. Kao rezultat toga, ciljni prijemni element je istaknut, ukazujući korisniku da postoji veza između njega i elementa koji se pomiče.

Događaj deaktiviranja se koristi za uklanjanje vrijednosti CSS svojstava iz elementa koji prima i resetiranje čim korisnik otpusti tipku miša. (Ovaj događaj se pokreće kad god se prevlačenje elementa zaustavi, bez obzira na to da li je prevučeni element ostavljen na elementu koji prima ili ne.) Ovaj proces je ilustrovan na slici:

Rukovanje preklapanjem elemenata

Tehnologija prevlačenja i ispuštanja može se poboljšati dodavanjem rukovanja događajima. Događaj prekoračenja se događa kada je 50% elementa koji se pomiče iznad bilo kojeg dijela elementa koji prima. Out događaj se pokreće kada se prethodno preklapajući elementi više ne preklapaju. Primjer odgovora na ove događaje prikazan je u nastavku:

$(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#draggable").text("Dropped") ) , aktivirajte: function() ( $("#droppable").css(( granica: "srednje dvostruko zeleno", backgroundColor: "lightGreen" )); ), deaktivirajte: function() ( $("#droppable"). css("border", "").css("background-color", ""); ), preko: function() ( $("#droppable").css(( granica: "srednja dvostruko crvena", backgroundColor : "crveno" )); ), out: function() ( $("#droppable").css("border", "").css("background-color", ""); ) )); ) ); Pokreni primjer

Ovdje se koriste iste funkcije rukovanja kao u prethodnom primjeru, ali u ovom slučaju su povezane sa događajima nad i izlaz. Kada se najmanje 50% lebdećeg elementa preklapa sa prijemnim elementom, on je uokviren i njegova boja pozadine se menja, kao što je prikazano na slici:

Ova granica od 50% naziva se prag tolerancije, koji se može postaviti prilikom kreiranja prijemnog elementa, kao što će biti prikazano u nastavku.

Postavka interakcije koja se može odbaciti

Interakcija koja se može ispustiti ima brojna svojstva koja možete modificirati da biste prilagodili njeno ponašanje. Ova svojstva su navedena u tabeli ispod:

Svojstva interakcije koja se mogu ispustiti

Nekretnina	Opis
onemogućeno	Ako je ova opcija tačna, funkcija interakcije koja se može ispustiti je prvobitno onemogućena. Zadana vrijednost je lažna
prihvatiti	Sužava skup plutajućih elemenata na koje će prijemni element odgovoriti. Zadana vrijednost je *, odgovara bilo kojem elementu
activeClass	Definira klasu koja će biti dodijeljena kao odgovor na događaj aktivacije i uklonjena kao odgovor na događaj deaktiviranja
hoverClass	Definira klasu koja će biti dodijeljena kao odgovor na događaj prekoračenja i uklonjena kao odgovor na događaj out.
tolerancije	Određuje minimalni stepen preklapanja na kojem se događa preklapanje

Ograničenje dozvoljenih plutajućih elemenata

Možete ograničiti skup elemenata koji se mogu ispustiti koje će prihvatiti element koji ima funkcionalnost interoperabilnosti za ispuštanje korištenjem opcije prihvaćanja. Vrijednost opcije prihvaćanja treba biti selektor. Kao rezultat ovog događaja, interakcije koje se mogu ispustiti će se dogoditi samo ako element koji se premješta odgovara navedenom selektoru. Relevantan primjer je prikazan u nastavku:

...

Pokreni primjer

U ovom primjeru postoje dva plutajuća elementa s ID-ovima drag1 i drag2. Prilikom kreiranja prihvatljivog elementa koristi se opcija accept, kojom označavamo da će samo element drag1 biti prihvatljiv plutajući element.

Kada prevučete drag1 element, vidjet ćete isti efekat kao u prethodnim primjerima. Događaji aktiviranja, deaktiviranja, prekoračenja i izlaza će se aktivirati na prijemnom elementu u odgovarajuće vrijeme. U isto vrijeme, ako prevučete drag2 element koji se ne podudara sa selektorom navedenim u parametru prihvaćanja, ovi događaji se neće pokrenuti. Ovaj element se može slobodno pomicati, ali ga element koji prima neće prihvatiti.

Obratite pažnju na promjenu u načinu odabira prihvatljivog plutajućeg elementa na kojem ćete pozvati metodu text(). Kada je u dokumentu postojao samo jedan plutajući element, atribut id je bio dovoljan za ovo:

Ispusti: function() ( $("#draggable").text("Dropped") ),

U ovom primjeru postoje dva plutajuća elementa, a odabir po atributu id neće dati željeni rezultat, jer će se tekst u ovom slučaju uvijek mijenjati u istom plutajućem elementu, bez obzira koji je prihvatljiv elementu koji prima.

Rješenje je korištenje ui objekta koji jQuery UI pruža kao dodatni argument svakom rukovaocu događaja. Svojstvo prevlačenja ui objekta vraća jQuery objekt koji sadrži element koji korisnik povlači ili pokušava spustiti na ciljni element, omogućavajući odabir željenog elementa na sljedeći način:

Ispuštanje: funkcija (događaj, ui) ( ui.draggable.text("Ispušteno") ),

Promjena praga preklapanja

Prema zadanim postavkama, događaj over se pokreće samo kada se najmanje 50% elementa koji se pomiče preklapa sa elementom koji prima. Iznos ovog preklapanja praga može se promijeniti pomoću opcije tolerancije, koja može poprimiti vrijednosti prikazane u tabeli ispod:

Dvije vrijednosti koje najčešće koristim, fit i touch, su one koje korisnicima imaju najviše smisla. Koristim vrijednost uklapanja kada prevučeni element treba da ostane u području prijemnog elementa gdje je pomaknut, a vrijednost dodira kada se prevučeni element treba vratiti u prvobitni položaj (primjer će biti dat kasnije). Primjer korištenja parametara uklapanja i dodira prikazan je u nastavku:

Vrijednost kloniranja govori korisničkom sučelju jQuery da kreira kopiju plutajućeg elementa zajedno sa svim njegovim sadržajem i koristi rezultat kao pomoćni element. Rezultat je prikazan na slici:

Pomoćni element se uklanja kada korisnik otpusti tipku miša iznad elementa koji se pomiče, ostavljajući element koji se pomiče i element koji prima u prvobitnim pozicijama.

Kao što je prikazano na slici, originalni plutajući element ostaje na svom mjestu i samo se pomoćni element kreće po ekranu prateći pokazivač miša. Ako je veličina elementa koji se pomiče velika, kao u našem primjeru, onda pokriva ostale elemente dokumenta, pa će korisniku biti teško čak i pratiti poziciju elementa koji prima. Ovaj problem se može riješiti pružanjem funkcije kao vrijednosti pomoćne opcije, kao što je prikazano u primjeru ispod:

... $(function() ( $("div.draggable")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover" )); )); ... Pokrenite primjer

Kada korisnik počne prevlačiti element, jQuery UI poziva funkciju, parametar pomoćnik i koristi vraćeni element kao pokretni objekt. U ovom slučaju, koristim jQuery za kreiranje img elementa. Rezultat je prikazan na slici:

Mala slika služi kao čuvar mjesta za plutajući element, čineći mnogo lakšim praćenje ostalih elemenata u dokumentu.

Ui objekat koji jQuery UI prosljeđuje događajima interakcije koje se mogu ispustiti sadrži svojstvo pomoćnika, a ovo svojstvo se može koristiti za manipulaciju pomoćnim elementom dok se povlači. Primjer korištenja ovog svojstva u kombinaciji s događajima preko i van prikazan je u nastavku:

... $(function() ( $("div.draggable")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover", over: function(event, ui) (ui.helper.css("border", "thick solid #27e6ed") ) , out: funkcija(događaj, ui) (ui.helper.css("border", "") ) )); )); ...

Ovdje se događaji prelaska i izlaska i svojstvo ui.helper koriste za prikaz ivice oko pomoćnog elementa kada se preklapa sa elementom hosta. Rezultat je prikazan na slici:

Zakačite na rubove elemenata

Via snap opcije moguće je postići da element koji se pomiče "privuče" rubove elemenata pored kojih prolazi. Ova opcija uzima selektor kao svoju vrijednost. Plutajući element će se zakačiti za rubove bilo kojeg elementa koji odgovara navedenom selektoru. Primjer korištenja opcije snap prikazan je u nastavku:

Pokreni primjer

Kada se pokretni element približi nekom od podudarnih elemenata, on je na neki način "povučen" do njega na način da se njihove susjedne ivice dodiruju. Za takvo vezivanje možete odabrati bilo koji element, a ne samo onaj koji prima. U ovom primjeru, dodao sam element div i postavio opciju snap na vrijednost koja odabire ovaj element u dokumentu, kao i element koji prima.

Postoji nekoliko podopcija koje vam omogućavaju da fino podesite kako se elementi ponašaju u pogledu sidrenja. Jedan od njih je snapMode opcija. Može se koristiti za određivanje vrste vezivanja. Dozvoljene su sljedeće vrijednosti: unutrašnji(zakači na unutrašnje ivice elemenata), vanjski(zakači na vanjske ivice elemenata) i oboje(zakači na sve ivice; zadano).

opcija snapTolerance omogućava vam da odredite koliko plutajući element mora prići rubu ciljnog elementa prije nego što dođe do skakanja. Zadana vrijednost je 20 što znači 20 piksela. Primjer koristi vrijednost 50, što odgovara sidru na većoj udaljenosti. Vrlo je važno odabrati pravu vrijednost za ovu opciju. Ako je vrijednost opcije snapTolerance preniska, tada korisnik možda neće primijetiti efekat hvatanja, a ako je previsoka, element koji se pomiče će početi neočekivano skakati, hvatajući se za udaljene elemente.

Za VCL biblioteku, Borland je implementirao sopstvenu verziju Drag&Drop interfejsa (prevedeno kao "drag"). Ovo sučelje je interno - možete slati i primati bilo koje Delphi kontrole unutar obrasca "(osim samog obrasca). Implementirano je bez korištenja odgovarajućih Windows API funkcija - moraju se koristiti kada organizirate komunikaciju s drugim zadacima povlačenjem i ispuštanjem .

Pritiskom na lijevu tipku miša preko kontrole možemo je "prevući" na bilo koji drugi element. Sa stanovišta programera, to znači da se u momentima prevlačenja i otpuštanja ključa generišu određeni događaji koji prenose sve potrebne informacije - pokazivač na prevučeni objekat, trenutne koordinate kursora itd. Prijemnik događaja je element na kojoj je ovog trenutka kursor se nalazi. Rukovalac za takav događaj mora reći sistemu da li data kontrola prihvata "slanje" ili ne. Kada se dugme pusti preko kontrole prijemnika, aktiviraju se još jedan ili dva događaja, u zavisnosti od spremnosti prijemnika.

CancelDrag Otkazuje trenutnu operaciju povuci i ispusti ili prevuci i pričvrsti.

Funkcija FindDragTarget (const Pos: TPoint ;AllowDisabled: Boolean ): TControl ;

Funkcija vraća objekat osnovne klase TControl , koji se odnosi na položaj ekrana s koordinatama navedenim parametrom Pos. Ova funkcija se koristi za određivanje potencijalnog primatelja operacije povuci i ispusti ili prevuci i pričvrsti. Ako za navedenu poziciju ne postoji kontrola prozora, funkcija se vraća nula . Parametar AllowDisabled određuje da li će onemogućeni objekti biti uzeti u obzir.

Funkcija IsDragObject(Pošiljalac: TObject): Boolean ;

Funkcija određuje da li je objekt naveden u parametru Sender potomak klase TDragObject . Ova funkcija može se koristiti kao parametar Source u OnDragOver i OnDockOver rukovateljima događaja kako bi se utvrdilo hoće li prevučeni objekt biti prihvaćen. Također funkcija IsDragObjectmože se koristiti kao parametar Source u OnDragDrop i OnDockDrop obrađivačima događaja kako bi se ispravno interpretirao prevučeni objekt.

DragMode, DragCursor svojstva, BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag metode, Accept parametar

Proces prevlačenja informacija sa jednog objekta na drugi pomoću miša se široko koristi u Widows-u. Možete premještati datoteke između foldera, premještati same foldere i još mnogo toga.

Sva svojstva, metode i događaji povezani sa procesom prevlačenja i ispuštanja definisani su u klasi TControl, koja je roditelj svih Delphi vizuelnih komponenti. Stoga su zajednički za sve komponente.

Početak povlačenja je određen svojstvom DragMode, koje se može postaviti u vrijeme dizajna ili programski jednako dmManual ili dmAutomatic. Vrijednost dmAutomatic (automatski) određuje automatski početak procesa prevlačenja kada korisnik klikne dugme miša preko komponente. Međutim, u ovom slučaju, događaj OnMouseDown povezan s korisnikom koji pritisne tipku miša se uopće ne pojavljuje za ovu komponentu.

Interfejs za prijenos i prijem komponenti pojavio se davno. Pruža interakciju između dvije kontrole tokom izvršavanja aplikacije. U tom slučaju se mogu izvršiti sve potrebne operacije. Uprkos jednostavnosti implementacije i starosti razvoja, mnogi programeri (posebno početnici) ovaj mehanizam smatraju nejasnim i egzotičnim. Međutim, korištenje Drag-and-Drop može biti vrlo korisno i lako za implementaciju. Sada ćemo ovo provjeriti.

Da bi mehanizam radio, dvije kontrole moraju biti konfigurirane u skladu s tim. Jedan mora biti izvor (Izvor), drugi - prijemnik (Target). U ovom slučaju, izvor se nikuda ne pomiče, već se samo kao takav registruje u mehanizmu.

Vjerujte mi, dovoljno ga je lako transformirati X,Y koordinate, proslijeđen u parametrima OnDragOver i OnDragDrop događaja, u koordinate obrasca.

Radite sa svojstvima Left i Top komponente nad kojom se kursor lebdi. Navest ću jednostavan primjer. Postavite komponentu Memo na obrazac i postavite njeno svojstvo Align na alTop. Postavite panel na obrazac, također postavite svojstvo Align na alTop i postavite svojstvo Height na malu vrijednost, recimo 6 ili 7 piksela. Postavite DragMode na dmAutomatica i DragCursor na crVSplit. Postavite drugu komponentu Memo i postavite Align na alClient. Odaberite oba bilješka u isto vrijeme, panel, i kreirajte zajednički OnDragOver obrađivač događaja kao što je prikazano u nastavku:

Nedavno sam imao ideju da razvijem android igricu. Za početak sam odlučio da pišem šah. Mislio sam na tehnologiju Povuci i ispusti savršen za implementaciju mehanizma za pomicanje oblika. Za neupućene, napominjem metoda drag and drop je u mogućnosti prevlačenja nekih grafičkih objekata na druge i izvođenja jedne ili druge radnje nakon puštanja. Najjednostavniji primjer- uklonite prečicu sa radne površine računara tako što ćete je prevući u smeće. "Bacanjem" etikete u smeće, mi kažemo sistemu da želimo da ova dva objekta budu u interakciji. Sistem prima naš signal i odlučuje koju akciju treba poduzeti. Povucite i ispustite je postalo široko rasprostranjeno zbog svoje intuitivne jasnoće. Ovaj pristup je podržan našim iskustvom u interakciji sa objektima iz stvarnog svijeta i odlično funkcionira u virtuelnom okruženju. Što se šaha tiče, korišćenjem drag and drop tehnološki je lakše odrediti ćeliju u koju je korisnik prevukao figuru, jer nije potrebno izračunati broj ćelije iz koordinata tačke ispuštanja. Ovaj posao će preuzeti virtuelna mašina.

Svrhe upotrebe Drag n Drop tehnologije

Korištenje drag and drop tehnologije omogućava mi da riješim tri problema sa malo krvi:

1. Vizualizacija pokreta. Kada korisnik dodirne oblik i počne ga pomicati po ekranu, oblik se zamjenjuje manjim crtežom. Dakle, korisnik razumije da je figura snimljena.
2. Ograničio sam područje kretanja figure na dimenzije ploče.
3. Ako korisnik pusti oblik na pogrešnom mjestu, trebao bi se vratiti u prvobitni položaj.

Zadaci su definisani, krenimo sa njihovom realizacijom.

Zamijenite ImageView na dodir

Svi moji oblici su objekti ImageView. Nažalost, ispostavilo se da implementacija Drag & Drop u Androidu ne dozvoljava da se "direktno iz kutije" zamijeni slika objekta kada se dodirne. Ipak, ovaj zadatak je prilično rješiv uz pomoć API-ja. Moramo izvršiti nekoliko jednostavnih koraka:

1. Kreirajte DragShadowBuilder objekat.
2. Pozovite metodu startDrag.
3. Sakrijte naš ImageView koji prikazuje oblik pozivanjem metode setVisibility sa parametrom View.INVISIBLE. Kao rezultat, na ekranu će ostati samo objekat DragShadowBuilder, koji će signalizirati korisniku da je oblik snimljen.

Ove akcije moraju biti implementirane u OnTouchListner rukovatelju ImageView objekta. Da bismo to učinili, nadjačat ćemo onTouch metodu:

@Override public boolean onTouch(View view, MotionEvent motionEvent) ( if (motionEvent. getAction() == MotionEvent. ACTION_DOWN) ( ClipData clipData= ClipData. newPlainText("" , "" ) ; View. DragShadowBuilder newBuilder. DragShadowBuilder. (view) ;view.startDrag(clipData, dsb, view, 0 ) ;view.setVisibility(View.INVISIBLE) ; vrati true ; ) else (vrati false ; ) )

Sve je vrlo jednostavno. Dakle, nakon što smo shvatili zamjenu slike, prijeđimo na sljedeći zadatak.

Ograničavanje područja povlačenja za funkciju drag drop

Ograničavanje područja povlačenja povezano je s jednim problemom. Činjenica je da ako pustite oblik izvan ploče, događaj ispuštanja se neće dogoditi, jer je korisnik ispustio objekt na prazno mjesto, a objekt nema s čim stupiti u interakciju. Kao rezultat toga, figura se neće vratiti u prvobitno stanje i ostat će zauvijek skrivena. Proveo sam dosta vremena čitajući dokumentaciju, ali nisam našao način da ograničim područje povlačenja objekata. Otkriće je došlo iznenada. Ne moram uopće ograničavati područje, moram znati da li je korisnik ispravno pustio figuru ili ne.

Određivanje ispravnog oslobađanja
Odgovore na svoja pitanja pronašao sam u odjeljku "rukovanje drag end događajima" na web lokaciji Android Developers. Evo nekoliko ključnih tačaka:

1. Kada korisnik završi prevlačenje, ACTION_DRAG_ENDED događaj se pokreće u DragLsteners rukovatelju.
2. U DragListener-u možete dobiti detaljnije informacije o operaciji prevlačenja pozivanjem metode DragEvent.getResult().
3. Ako DragListener vrati true kao odgovor na ACTION_DROP događaj, poziv getResult će također vratiti true, inače će vratiti false.

Dakle, moram uhvatiti događaj ACTION_DRAG_ENDED i pozvati metodu getResult. Ako se vrati netačno, tada je korisnik povukao oblik sa ploče i moram da učinim ImageView vidljivim.

@Override public boolean onDrag(View view, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; View dragView= (View) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( containsDragable)= false if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( containsDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View)dra VISIBLE) if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View)dra VISIBLE) if (DragAction== DragEvent. ACTION_DRAG_ENDED) = DragEvent. ACTION_DROP& amp;& amp; containsDragable) ( checkForValidMove((ChessBoardSquareLayoutView) pogled, dragView) ; dragView. setVisibility(View. VISIBLE) ; ) return true ; ) privatni boolean dropEventNotHandled(ReventNotHandleds get dragEventNotHandled(Dragvent). ) ; )

Sada korisnik može otpustiti figuru bilo gdje i ništa strašno se neće dogoditi.

Određivanje dozvoljenih poteza

Posljednji dio članka posvećen je provjeri valjanosti poteza koji korisnik pokušava napraviti. Prije nego što detaljnije razgovaram o ovoj temi, napravit ću malu primjedbu objašnjavajući strukturu moje aplikacije. Šahovnica je predstavljena kao TableLayout, a svaka ćelija je potomak LinearLayouta i ima OnDragListener.

Osim toga, svaki OnDragListener se odnosi na objekat "posrednik", koji se brine o interakciji objekata igre i pamti poziciju trenutne ćelije.

Kada korisnik prevuče oblik preko ćelije, moguće su sljedeće radnje:

1. Korištenje događaja ACTION_DRAG_ENTERED za postavljanje varijable 'containsDraggable' na true.
2. Korištenje događaja ACTION_DRAG_EXITED za postavljanje varijable 'containsDraggable' na false.
3. Korištenje događaja ACTION_DROP za ispitivanje međuopreme da li je dozvoljeno postavljanje oblika u ovu ćeliju.

Ispod je kod koji implementira opisanu logiku

@Override public boolean onDrag(View view, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; View dragView= (View) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( containsDragable)= false if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( containsDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View)dra VISIBLE) if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View)dra VISIBLE) if (DragAction== DragEvent. ACTION_DRAG_ENDED) = DragEvent.ACTION_DROP& amp;& amp; containsDragable) ( checkForValidMove((ChessBoardSquareLayoutView) pogled, dragView) ; dragView. setVisibility(View. VISIBLE) ; ) vrati true ; )

Kao što vidite, bez obzira na to da li je potez ispravan ili ne, ImageView je postavljen na vidljivo stanje. Želio sam da korisnik vidi kako se oblik pomiče. Ranije sam spomenuo da je ćelija dijete LayoutView-a. Ovo se radi kako bi se olakšalo premještanje ImageViewa iz ćelije u ćeliju. Ispod je kod za metodu checkForValidMove, koji pokazuje kako se ImageView pomera.

private void checkForValidMove(ChessBoardSquareLayoutView pogled, View dragView) ( if (medijator. isValidMove(view) ) (ViewGroup owner= (ViewGroup) dragView. getParent() ; owner. removeView(dragView) ; view. addView(dragView) ; view. (Gravity.CENTER) ;view.showAsLanded() ;mediator.handleMove(view) ; ) )

Nadam se da će vam ovaj članak pomoći pri razvoju vlastitih projekata.