Povucite i ispustite: kako upravljati elementima korisničkog sučelja

Najlakše je uzeti i staviti nešto, nego napisati ono što trebate poduzeti i gdje ga staviti. Naravno, bez miša, ili uređaja sličnog njemu, nećete birati ništa i nećete ništa specificirati, ali čak iu trenutnom stanju stvari, koristeći ideju "povuci i ispusti" vrlo je prirodno i ugodno.

Ideja nije obuhvaćena samo internetskim trgovinama, elektroničkim knjižnicama, pretraživačkim ili informacijskim sustavima, nego i sferom primjene. Ideja je vrlo primjenjiva u razvoju stranica i njihovih elemenata, kreiranih i održavanih interaktivno, bez sudjelovanja programera.

Opis ideje

Odaberite, premjestite i stavite - ideja je prirodna i ugodna. Nevjerojatno je da se nije rodila kada je miš postao nezamjenjivo računalo s dodatkom.

Najočitiji primjer je odabir proizvoda u internetskoj trgovini. Ponesite željeni proizvod mišem i povucite ga u košaricu - jednostavno, prirodno i povoljno. Preuzimanje datoteka: uzimanje dokumenta izvan prozora preglednika i njegovo stavljanje na element stranice, čime se pokreće prijenos dokumenta na poslužitelj, također je praktična ideja.

Za razvojnog inženjera, ideja povlačenja i ispuštanja je manipuliranje elementima stranice bez ručnog preračunavanja koordinata i veličina oznaka, mogućnosti odabira više elemenata i njihovog poravnanja, kao i pomicanja stranica oznaka bloka.

HTML i CSS su izvrsni jezici za opisivanje oznaka i njihovih stilova, ali kada programer ima mogućnost interaktivnog manipuliranja elementima stranice bez ručnog preračunavanja koordinata i veličina, to čini rad ugodnijim i učinkovitijim.

Jednostavan prijenos datoteka

“Povuci i pusti”: prijevod s engleskog na ruski doslovno zvuči “povuci i ispusti”. U praksi to zvuči i djeluje bolje: bira, prenosi i oslobađa - jednostavno i prirodno.

Implementacija na stranici prijenos datoteka na stranicu, na poslužitelj ili za druge namjene je vrlo jednostavna.

U ovom primjeru, miš je odabrao nekoliko datoteka na radnoj površini (lijeva slika). Prilikom odabira, pritisnuta je lijeva tipka miša, a odabrana “otišla” u košaru. Sam preglednik je pokazao kako se to događa, napisao je “kopiranje” i oko kreirao obrise premještenih datoteka.

Kada se miš pojavio iznad košarice, posjetitelj je pustio lijevu tipku miša, povuci se i ispusti događaj, a na stranici web stranice (donja slika) JavaScript kod je bio u mogućnosti primiti i obraditi sve datoteke koje je posjetitelj dao stranici (web stranici).

Opis provedbe

Kod koji izvodi ovaj postupak je vrlo jednostavan. Čak i početnik može ga ponoviti u svim slučajevima uporabe.

Ovdje je korisničko sučelje predstavljeno s dvije oznake: scPlaceFile (to je sama košarica, gdje trebate staviti datoteke) i scPlaceFiles (to je rezultat obrade datoteka, u ovom slučaju njihove liste).

Logika stranice je sljedeća. Kada se stranica učita u pregledniku, u košari je dodijeljen "ondrop" rukovatelj događajima - da se stavi, ostali događaji se blokiraju i ne koriste.

Stranica radi u uobičajenom načinu rada, ali čim posjetitelj odabere datoteku (e) i povuče ih na sliku košare, tj. Na scPlaceFile oznaku, pokreće se događaj "datoteke stigao".

Ovaj vodič jednostavno prikazuje popis datoteka. Njihov broj je u event.dataTransfer.files.length, a informacije o svakoj datoteci u event.dataTransfer.files [i] .name. Programer određuje što učiniti s primljenim podacima, u ovom slučaju se jednostavno formira popis primljenih datoteka.

Nakon obrade događaj je blokiran i nije distribuiran. To je potrebno kako se preglednik ne bi uključio u amaterske aktivnosti i ne bi se miješao u obradu primljenih informacija.

DnD i vanjski podaci

Prijenos slika na poslužitelj povlačenjem i ispuštanjem uobičajena je praksa korištenja ove tehnologije. U pravilu, programer stvara obrazac za prijenos datoteke (1), koja radi na uobičajeni način (2). Posjetitelj može normalno odabrati datoteke i učitati ih.

Međutim, ako posjetitelj na određenom mjestu na obrascu "povuče i ispusti", polje za datoteke (datoteke) će se automatski popuniti.

Ovo je dobra odluka. Pod pretpostavkom da na računalu nema miša, naravno, vrlo je teško. No, bolje je razviti korisničko sučelje u uobičajenoj inačici iu DnD-implementaciji.

DnD i interni podaci

Briga o interesima posjetitelja uvijek je važna, ali problem je i developera. Možete povući i ispustiti ne samo standardnim sredstvima, već i rukovanjem događajima na elementima stranice.

Zadatak izračuna koordinata oznaka i njihovih veličina događa se stalno. Ručni izračun je dobra praksa, ali je interaktivna verzija praktičnija. Sve oznake uvijek imaju pravokutni oblik i, prateći "miša" na stranama elemenata, možete stvoriti mogućnost automatskog pomicanja elemenata na pravo mjesto na stranici ili za njihovo mijenjanje.

Rukovanje klikom miša - memoriranje koordinata lokacije klika, primjerice, jedne od strana elementa. Pomicanje miša - strana se kreće u pravom smjeru. Otpustite tipku miša - strana se zaustavlja, a njezine se koordinate mijenjaju. Tako možete promijeniti položaj elementa ili njegovu veličinu.

Formalno, to nije "povuci i ispusti", ali je učinak sličan i praktičan. Nakon što ste napravili univerzalne rukovatelje za bilo koji element stranice, možete dobiti dobar interaktivni rezultat, ubrzati razvoj i pojednostaviti kod.

Vizualno i ručno programiranje

Miš na računalu i prsti na pametnom telefonu potpuno su različiti pristupi implementaciji korisničkog sučelja (posjetitelj, programer). To je potpuno prirodan i moderan zahtjev za kompatibilnost svih preglednika.

Sve to zajedno otežava stvaranje stranica, ali primjenom ideje "povuci i ispusti" u svom standardnom obliku, koristeći svoje događaje, kombinirajući tu ideju s običnim događajima na elementima, možeš implementirati mehanizam kojim će se stvaranje stranica pojaviti vizualno.

Sada razmotrimo izbor elementa ili elemenata. Činjenica odabira je izgled kontekstnog izbornika, na primjer, cilj je poravnanje odabranog (lijevo, desno, središte), ili distribucija elemenata vertikalno ili horizontalno s istim korakom, ili promjena njihove veličine (minimalna, maksimalna).

Automatsko ponovno izračunavanje koordinata i veličina poželjnije je od ručnog. Manje grešaka - brži cilj. Osim toga, možete napraviti stranicu u jednom pregledniku, spremiti položaj i veličinu elemenata. Otvaranjem ove stranice na pametnom telefonu možete ispraviti vrijednosti koordinata i veličina te ih zapamtiti za određeni model pametnog telefona ili verziju preglednika.

Dakle, na istoj stranici bez ručnog usklađivanja sa zahtjevima kompatibilnosti među pretraživačima bit će različiti podaci za prikazivanje na različitim uređajima iu različitim preglednicima.

Ako dopustite posjetitelju da ove postupke provodi samostalno, kao i da odaberete željene elemente stranice među onima koje je razvio programer, možete osigurati kompatibilnost između preglednika i potrebnu funkcionalnost stranice, uzimajući u obzir poglede korisnika.