Povuci-i-ispusti: Način manipuliranja elementima korisničkog sučelja - Tehnološke vijesti i high-tech flipperworld.org

Najlakše je uzeti i staviti nešto nego napisati što uzeti i gdje staviti. Naravno, bez miša, ili uređaja kao što je ovaj, ne birate ništa i ne govorite ništa, ali čak iu trenutnom stanju stvari, upotreba ideje povuci i ispusti je vrlo prirodna i ugodna.

Opseg ideje - daleko više ne samo internetske trgovine, elektroničke knjižnice, pretraživački ili informacijski sustavi, kao i primijenjeno polje. Ideja je vrlo primjenjiva čak iu razvoju stranica i njihovih elemenata, kreiranih i interaktivno praćenih, bez sudjelovanja programera.

Opis ideje

Odaberite, premjestite i stavite - ideja je prirodna i prikladna. Čudno je da se nije rodila kada je miš postao nezamjenjiv dodatak računalu. Najočitiji primjer je izbor robe u internetskoj trgovini. Nabavite pravi proizvod pomoću miša i povucite ga u košaricu - to je jednostavno, prirodno i praktično. Preuzimanje datoteka: uzmite dokument izvan prozora preglednika i stavite ga na element stranice, tako da je pokretanje prijenosa dokumenta na poslužitelj - također praktična ideja.

Za programere, ideja "povuci i ispusti" je manipulirati elementima stranice bez ručnog pretvaranja koordinata i veličina oznaka, mogućnosti odabira više elemenata i poravnavanja, te pomicanja strana oznaka bloka.

HTML i CSS izvrsni su jezici za opisivanje oznaka i stilova njihovog dizajna, ali kada programer ima mogućnost interaktivnog manipuliranja elementima stranice bez priručnikaPretvaranje koordinata i veličina čini posao ugodnijim i učinkovitijim.

Jednostavan prijenos datoteka

"Povuci i ispusti": prijevod s engleskog na ruski doslovno zvuči "povuci i baci". U praksi to zvuči i radi bolje: izabrao, preselio i objavio - pravedan i prirodan. Implementacija stranice na stranici za prijenos datoteka na stranicu, na poslužitelj ili za druge namjene vrlo je jednostavna.

U ovom primjeru, miš je odabrao nekoliko datoteka na radnoj površini (lijeva strana). Prilikom odabira, lijeva tipka miša je pritisnuta, a odabrana "otišla" u košaru. Sam preglednik je pokazao kako se to događa, napisao je "copy" prompt, a oko kreirao obrise pokretnih datoteka.
Kada je miš bio iznad košare, posjetitelj je pustio lijevu tipku miša, dogodio se događaj "povuci i ispusti", a na stranici stranice (donja slika) javascript-kod je mogao primiti i obraditi sve datoteke koje je posjetitelj dao stranici (mjestu).

Opis provedbe

Kod koji provodi ovaj postupak vrlo je jednostavan. Može se čak ponoviti u bilo kojoj aplikaciji, čak i kod početnika. Ovdje je korisničko sučelje predstavljeno s dvije oznake: scPlaceFile (ovo je sama košarica u koju želite staviti datoteke) i scPlaceFiles (to je rezultat obrade datoteka, u ovom slučaju njihove liste). Logika stranice je sljedeća. Kada učitate stranicu u preglednik, smeće se može dodijeliti "ondrop" događaju - put, drugi događaji se blokiraju i ne koriste.

Stranica radi u normalnom načinu rada, ali kada posjetitelj odabere datoteku (e) ipovlačeći ih na sliku košarice, odnosno na scPlaceFile oznaku, pokrenut će se događaj "datoteke su stigle".

Ovaj vodič jednostavno ispisuje popis datoteka. Njihov se broj nalazi u event.dataTransfer.files.length, a informacije o svakoj datoteci event.dataTransfer.files [i] .name. Što učiniti s primljenih podataka, određuje programer, u ovom slučaju, jednostavno formirana popis primljenih datoteka. Nakon obrade događaj je blokiran i ne primjenjuje se. Neophodno je da se preglednik ne upušta u samozapošljavanje i ne miješa se u proces obrade primljenih informacija.

DnD i vanjski podaci

Učitavanje slika na poslužitelj u "povuci i ispusti" uobičajena je praksa korištenja ove tehnologije. U pravilu, programer stvara obrazac za preuzimanje datoteke

koja normalno radi

. Posjetitelj može normalno odabrati datoteke i preuzeti ih.
Međutim, ako posjetitelj na određenom mjestu obrasca napravi "povuci i ispusti", polje datoteke (datoteka) će se automatski popuniti.

Ovo je dobra odluka. Naravno, vrlo je teško priznati da na računalu nema miša. Ali bolje je razviti korisničko sučelje na uobičajeni način iu DnD-implementaciji.

DnD i interni podaci

Briga o interesima posjetitelja uvijek je važna, ali problemi nositelja zahvata su također važni. Moguće je implementirati "povuci i ispusti" ne samo standardnim sredstvima, već i obradom događaja miša na elementima stranice. Zadatak izračuna vrijednosti koordinata oznaka i njihovih veličina stalno se pojavljuje. Ručni izračun je dobra praksa, ali je interaktivna verzija praktičnija. Sve oznake uvijekimaju pravokutni oblik i, prateći događaje "miša" na stranama elemenata, možete stvoriti mogućnost automatskog pomicanja elemenata na željeno mjesto stranice ili za njihovo mijenjanje.

Obrada događaja tipke miša je mjesto klika lokacije, na primjer, jedan od elemenata elementa. Pomaknite miša - strana se kreće u pravom smjeru. Otpustite tipku miša - strana se zaustavlja, a koordinate se mijenjaju. Da, 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. Stvarajući univerzalne rukovatelje za bilo koju stavku na stranici, 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 različiti pristupi implementaciji korisničkog sučelja (posjetitelj, programer). Postoji potpuno prirodan i moderan zahtjev za crossbrowser.

Sve to u zbroju komplicira stvaranje stranica, ali koristeći ideju "povuci i ispusti" u standardnom obliku, koristeći svoje događaje, kombinirajući tu ideju s uobičajenim događajima na elementima, možeš realizirati mehanizam u kojem će se stvaranje stranice pojaviti vizualno. Pogledajmo sada odabir elementa ili elemenata. Činjenica izbora je izgled kontekstnog izbornika, na primjer, cilj - poravnanje odabranog (lijevo, desno, središte), ili distribucija elemenata vertikalno ili horizontalno s istim korakom, ili promjena njihove veličine (relativno minimalna,maksimum). Automatsko ponovno izračunavanje koordinata i veličina pretežno ručno. Manje grešaka - cilj je brži. Osim toga, možete napraviti mjesto u jednom pregledniku, spremite položaj i veličinu elemenata. Otvaranjem ove stranice na pametnom telefonu možete podesiti vrijednost koordinata i veličina te ih zapamtiti za određeni model pametnog telefona ili verzije preglednika. Tako će jedna stranica bez ručnog usklađivanja s križanjem imati različite podatke za prikazivanje na različitim uređajima iu različitim preglednicima.

Ako dopustite posjetitelju da samostalno izvede ove postupke, kao i da odaberete potrebne elemente stranice iz broja koji je dao programer, unakrsno pretraživanje može osigurati potrebnu funkcionalnost stranice, uzimajući u obzir mišljenje korisnika.