Povleci in spusti: kako upravljati elemente uporabniškega vmesnika

Najlažje je vzeti in dati nekaj, kot napisati, kar morate narediti in kje ga dati. Seveda, brez miške ali podobne naprave ne boste ničesar izbrali in ničesar ne boste določili, ampak tudi v trenutnem stanju stvari je uporaba ideje »povleci in spusti« zelo naravna in udobna.

Namen zamisli niso le spletne trgovine, elektronske knjižnice, iskalni ali informacijski sistemi, temveč tudi področje uporabe. Ideja je zelo uporabna pri razvoju spletnih strani in njihovih elementov, ustvarjenih in vzdrževanih interaktivno, brez sodelovanja programerja.

Opis ideje

Izberite, premaknite in postavite - ideja je naravna in udobna. Neverjetno je, da se ni rodila, ko je miš postala nepogrešljiv računalnik za dodatno opremo.

Najbolj očiten primer je izbira izdelkov v spletni trgovini. Z miško vzemite želeni izdelek in ga povlecite v nakupovalno košarico - preprosto, naravno in udobno. Prenos datotek: prevzem dokumenta izven okna brskalnika in njegovo postavitev na element strani, s čimer se začne prenos dokumenta na strežnik, je prav tako praktična ideja.

Za razvijalca je zamisel povleci in spusti manipulirati elemente strani brez ročnega preračunavanja koordinat in velikosti oznak, zmožnosti izbire več elementov in poravnave, kot tudi premikanje strani oznak bloka.

HTML in CSS sta odlična jezika za opisovanje oznak in njihovih stilov, toda če ima razvijalec možnost, da interaktivno manipulira z elementi strani brez ročnega preračunavanja koordinat in velikosti, je to delo bolj udobno in učinkovito.

Preprost prenos datotek

»Povleci in spusti«: prevod iz angleščine v ruščino dobesedno zveni »povleci in spusti«. V praksi to zveni in deluje bolje: izbrali, prenesli in izpustili - preprosto in naravno.

Izvajanje na strani prenosa datotek na stran, na strežnik ali za druge namene je zelo preprosto.

V tem primeru je miška na namizju izbrala več datotek (leva slika). Pri izbiri je bil pritisnjen levi gumb miške in izbrani »šel« v koš. Sam brskalnik je pokazal, kako se to dogaja, napisal je namig „kopiranje“ in okrog ustvaril obrise premaknjenih datotek.

Ko se je miška pojavila nad košaro, je obiskovalec spustil levi gumb miške, dogodek »povleci in spusti« se je zgodil in na spletni strani (spodnja slika) je bila JavaScript koda sposobna sprejeti in obdelati vse datoteke, ki jih je obiskovalec posredoval na strani (spletni strani).

Opis izvajanja

Koda, ki izvaja ta postopek, je zelo preprosta. Tudi začetnik lahko to ponovi v vseh primerih uporabe.

Tukaj je uporabniški vmesnik predstavljen z dvema oznakama: scPlaceFile (to je košarica sama, kjer morate dati datoteke) in scPlaceFiles (to je rezultat obdelave datotek, v tem primeru njihovega seznama).

Logika strani je naslednja. Ko je stran naložena v brskalniku, je v košari dodeljen "ondrop" vodnik dogodka, ki ga želimo postaviti, ostale dogodke pa blokiramo in ne uporabljamo.

Stran deluje v običajnem načinu, vendar takoj, ko obiskovalec izbere datoteko (e) in jo povleče na sliko košarice, torej na oznako scPlaceFile, se zažene dogodek »datoteke prispel«.

Ta priročnik preprosto prikaže seznam datotek. Njihovo število je v datoteki event.dataTransfer.files.length in informacije o vsaki datoteki v datoteki event.dataTransfer.files [i] .name. Razvijalec ugotovi, kaj storiti s prejetimi podatki, v tem primeru se preprosto oblikuje seznam prejetih datotek.

Po obdelavi je dogodek blokiran in ni razdeljen. To je potrebno, da brskalnik ne sodeluje v ljubiteljskih dejavnostih in ne posega v obdelavo prejetih informacij.

DnD in zunanji podatki

Prenos slik na strežnik v načinu povleci in spusti je običajna praksa uporabe te tehnologije. Razvijalec praviloma ustvari obrazec za nalaganje datoteke (1), ki deluje na običajen način (2). Obiskovalec lahko običajno izbere datoteke in jih naloži.

Če pa obiskovalec na določenem mestu na obrazcu naredi »povleci in spusti«, se polje (datoteke) imena datoteke samodejno zapolni.

To je dobra odločitev. Ob predpostavki, da na računalniku ni miške, je seveda zelo težko. Vendar je bolje, da uporabite uporabniški vmesnik v običajni različici in v izvedbi DnD.

DnD in notranji podatki

Skrb za interese obiskovalca je vedno pomembna, vendar so tudi problemi razvijalca pomembni. Povleci in spusti lahko izvedete ne samo s standardnimi sredstvi, temveč tudi z ravnanjem z miškimi dogodki na elementih strani.

Naloga izračunavanja koordinat oznak in njihovih velikosti se nenehno pojavlja. Ročni izračun je dobra praksa, vendar je interaktivna različica bolj priročna. Vse oznake imajo pravokotno obliko, sledenje dogodkom "miške" na straneh elementov pa omogoča, da elemente samodejno premaknete na pravo mesto na strani ali jih spremenite.

Ravnanje s klikom miške - zapomnitev koordinat lokacije klika, na primer eno od strani elementa. Premikanje miške - stran se premika v pravo smer. Sprostitev gumba miške - stran se ustavi in ​​njene koordinate se spremenijo. Tako lahko spremenite položaj elementa ali njegovo velikost.

Formalno to ni „povleci in spusti“, vendar je učinek podoben in praktičen. Ker ste naredili univerzalne rokovnike za kateri koli element strani, lahko dobite dober interaktivni rezultat, pospešite razvoj in poenostavite kodo.

Vizualno in ročno programiranje

Miška na računalniku in prsti na pametnem telefonu so popolnoma različni pristopi k izvajanju uporabniškega vmesnika (obiskovalec, razvijalec). To je povsem naravna in sodobna zahteva za združljivost med brskalniki.

Vse to skupaj otežuje ustvarjanje strani, vendar z uporabo ideje »povleci in spusti« v standardni obliki, z uporabo svojih dogodkov, ki združuje to idejo z navadnimi dogodki na elementih, lahko uporabiš mehanizem, s katerim se bo ustvarjanje strani zgodilo vizualno.

Zdaj pa razmislimo o izbiri elementa ali elementov. Dejstvo izbire je videz kontekstnega menija, npr. Cilj je poravnava izbranega (levo, desno, središče) ali porazdelitev elementov navpično ali vodoravno z istim korakom ali sprememba njihove velikosti (minimalna, maksimalna).

Samodejni ponovni izračun koordinat in velikosti je boljši od ročnega. Manj napak - hitrejši cilj. Poleg tega lahko naredite stran v enem brskalniku, shranite položaj in velikost elementov. Z odprtjem te strani na pametnem telefonu lahko popravite vrednosti koordinat in velikosti ter si jih zapomnite za določen model pametnega telefona ali različico brskalnika.

Torej bo ista stran brez ročne skladnosti z zahtevami združljivosti med različnimi brskalniki imela različne podatke za prikaz na različnih napravah in v različnih brskalnikih.

Če dovolite obiskovalcu, da izvede te postopke samostojno, in izberete želene elemente strani med tistimi, ki jih je razvil razvijalec, lahko zagotovite navzkrižno brskanje in zahtevano funkcionalnost strani ob upoštevanju stališč uporabnika.