Najlažje je vzeti in dati nekaj, kot napisati, kaj vzeti in kje ga dati. Seveda, brez miške ali naprave, kot je ta, ne izberete ničesar in nič ne rečete, ampak tudi v trenutnem stanju stvari je uporaba ideje povleci in spusti zelo naravna in udobna.

Obseg ideje - ne le spletne trgovine, elektronske knjižnice, iskalni ali informacijski sistemi kot tudi uporabno področje. Ideja je zelo uporabna tudi pri razvoju spletnih strani in njihovih elementov, ustvarjenih in interaktivno spremljanih, brez sodelovanja programerja.

Opis ideje

Izberite, premaknite in postavite - ideja je naravna in primerna. Nenavadno je, da se ni rodila, ko je miška postala nepogrešljiv pripomoček za računalnik. Najbolj očiten primer je izbira blaga v spletni trgovini. Z miško dobite pravi izdelek in ga povlecite v nakupovalni voziček - to je preprosto, naravno in priročno. Prenesi datoteke: vzemite dokument izven okna brskalnika in ga postavite na element strani, s čimer začnete prenos dokumenta na strežnik - je tudi praktična ideja. Za razvijalca je ideja "povleci in spusti" manipulacija elementov strani brez ročnega pretvarjanja koordinat in velikosti oznak, zmožnost izbire več elementov in poravnavanja ter premikanje strani oznak bloka.

HTML in CSS so odlični jeziki za opisovanje oznak in slogov njihovega oblikovanja, ko pa ima razvijalec možnost, da interaktivno manipulira z elementi strani brez navodils pretvorbo koordinat in velikosti, je delo bolj udobno in učinkovito.

Preprost prenos datotek

"Povleci in spusti": prevod iz angleščine v ruščino dobesedno zveni "povleci in vrzi". V praksi to zveni in deluje bolje: izbrali, premaknili in izpustili - prav in naravno. Izvajanje strani na strani za prenos datotek na stran, strežnik ali za druge namene je zelo preprosto. V tem primeru je miška na namizju izbrala več datotek (leva stran). Pri izbiri je bil pritisnjen levi gumb miške in izbrani "šel" v koš. Brskalnik je sam pokazal, kako se dogaja, napisal je poziv za kopiranje in okrog ustvaril obrise premikajočih se datotek.
Ko je bila miška nad košaro, je obiskovalec spustil levi gumb miške, dogodek »povleci in spusti« se je zgodil in na strani spletnega mesta (spodnja slika) javascript-koda je bila sposobna sprejeti in obdelati vse datoteke, ki jih je obiskovalec zagotovil stran (stran).

Opis izvajanja

Koda, ki izvaja ta postopek, je zelo preprosta. Lahko se celo ponovi v kateri koli aplikaciji, tudi razvijalec začetnikov. Tukaj je uporabniški vmesnik predstavljen z dvema oznakama: scPlaceFile (to je voziček, kjer želite postaviti datoteke) in scPlaceFiles (to je rezultat obdelave datotek, v tem primeru njihovega seznama). Logika strani je naslednja. Ko naložite stran v brskalnik, je smeti lahko dodeljena dogodku »ondrop«, drugi dogodki so blokirani in se ne uporabljajo. Stran deluje v običajnem načinu, vendar ko obiskovalec izbere datoteko (e) inče jih povlečete na sliko košarice, torej na oznako scPlaceFile, se bo začel dogodek »datoteke prispele«.

Ta vodnik preprosto natisne seznam datotek. Njihovo število se nahaja v datoteki event.dataTransfer.files.length in podatki o vsaki datoteki event.dataTransfer.files [i] .name. Kaj storiti s prejetimi podatki, določa, razvijalec, v tem primeru, preprosto oblikuje seznam prejetih datotek. Po obdelavi je dogodek blokiran in ne velja. Brskalnik se ne sme samozaposliti in se ne vmešava v proces obdelave prejetih informacij.

DnD in zunanji podatki

Prenos slik na strežnik v "povleci in spusti" je običajna praksa uporabe te tehnologije. Razvijalec praviloma ustvari obrazec za prenos datoteke

, ki deluje normalno