Drag and Drop tehnologija u Androidu. Drag-n-Drop tehnika pomoću jQueryja Što je povuci i ispusti

Najlakše je nešto uzeti i staviti, nego pisati, što uzeti i gdje staviti. Naravno, bez miša, ili sličnog uređaja, ne možete ništa odabrati i ništa naznačiti, ali čak i u sadašnjem stanju stvari korištenje ideje "povuci i ispusti" vrlo je prirodno i ugodno.

Opseg ideje daleko je od samo internetskih trgovina, digitalne knjižnice, pretraživačke ili informacijske sustave, ali i primijenjeno područje. Ideja je vrlo primjenjiva u razvoju stranica i njihovih elemenata, kreiranih i održavanih interaktivno, bez sudjelovanja programera.

Opis ideje

Odaberite, premjestite i postavite - ideja je prirodna i prikladna. Nevjerojatno je da se nije rodio kada je miš postao neizostavan računalni dodatak.

Najočitiji primjer je odabir proizvoda u online trgovini. Uzimanje željenog proizvoda mišem i povlačenje u košaricu je jednostavno, prirodno i praktično. Prijenos datoteka: Iznošenje dokumenta izvan prozora preglednika i postavljanje na element stranice, čime se pokreće prijenos dokumenta na poslužitelj, također je praktična ideja.

Za razvojnog programera, ideja "povuci i ispusti" je manipulacija elementima stranice bez ručnog ponovnog izračunavanja koordinata i veličina oznaka, mogućnost odabira nekoliko elemenata i njihovo poravnavanje, kao i pomicanje strana blok oznaka.

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

Jednostavan prijenos datoteka

"Povuci i ispusti": prijevod s engleskog na ruski doslovno zvuči "povuci i ispusti". U praksi zvuči i funkcionira bolje: odaberite, prenesite i otpustite - jednostavno i prirodno.

Vrlo je jednostavno implementirati na stranicu prijenos datoteka na stranicu, na poslužitelj ili za drugu upotrebu.

V ovaj primjer miš je odabrao nekoliko datoteka na radnoj površini (lijeva slika). Na odabiru je pritisnuta lijeva tipka miša i odabrani je "otišao" u košaricu. Sam preglednik je pokazao kako se to događa, napisao je "kopiju" nagovještaja i stvorio obrise datoteka koje će se premještati.

Kada je miš bio iznad košare, posjetitelj je pustio lijevi gumb miša, dogodio se događaj "drag and drop" i na stranici stranice (donja slika) JavaScript kod je mogao primiti i obraditi sve datoteke koje je posjetitelj dao stranici (stranici).

Opis implementacije

Kod koji izvodi ovaj postupak vrlo je jednostavan. Čak i početnik programer može ga ponoviti u bilo kojem slučaju upotrebe.

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

Logika stranice je sljedeća. Kada se stranica učita u preglednik, "ondrop" obrađivač događaja se dodjeljuje u košaricu - da stavimo, ostali događaji se blokiraju i ne koriste.

Stranica radi normalno, ali čim posjetitelj odabere datoteku(e) i povuče ih na sliku košarice, odnosno na oznaku scPlaceFile, započinje obrada događaja "datoteke stigle".

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

Nakon obrade, događaj se blokira i ne širi. To je neophodno kako preglednik ne bi bio samozaposlen i ne bi ometao obradu primljenih informacija.

DnD i vanjski podaci

Učitavanje slika na poslužitelj pomoću povlačenja i ispuštanja uobičajena je praksa u ovoj tehnologiji. Obično programer kreira obrazac za prijenos datoteke (1) koji radi na uobičajeni način (2). Posjetitelj normalno može odabrati datoteke i učitati ih.

Međutim, ako posjetitelj određenog mjesta na obrascu napravi "povuci i ispusti", tada će se polje za naziv datoteke automatski popuniti.

Ovaj dobra odluka... Naravno, vrlo je teško priznati da na računalu nema miša. Ali bolje je dizajnirati korisničko sučelje uobičajena verzija te u provedbi DnD.

DnD i interni podaci

Briga o interesima posjetitelja uvijek je važna, ali i brige developera. Povuci i ispusti može se implementirati ne samo standardnim sredstvima, već i rukovanjem događajima miša na elementima stranice.

Zadatak izračunavanja vrijednosti koordinata oznaka i njihovih veličina javlja se stalno. Ručni izračun je dobra praksa, ali interaktivna opcija je prikladnija. Sve oznake su uvijek pravokutne, a praćenjem događaja mišem na bočnim stranama elemenata možete stvoriti mogućnost automatskog premještanja elemenata na pravo mjesto na stranici ili ih mijenjati.

Rukovanje događajem klika na tipku miša - pohranjivanje koordinata mjesta 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 mijenjaju joj se koordinate. Na taj način možete promijeniti položaj elementa ili njegovu veličinu.

To formalno nije "drag and drop", ali je učinak sličan i praktičan. Izradom univerzalnih rukovatelja za bilo koji element stranice možete dobiti dobre interaktivne rezultate, ubrzati razvoj i pojednostaviti svoj kod.

Vizualno i ručno programiranje

Miš na računalu i prsti na pametnom telefonu - apsolutno različiti pristupi na implementaciju korisničkog sučelja (posjetitelj, programer). Ovo je prirodan i moderan zahtjev za kompatibilnost s različitim preglednicima.

Sve to zajedno komplicira izradu stranica, ali primjenom ideje "povuci i ispusti" u svom standardnom obliku, koristeći svoje događaje, kombinirajući ovu ideju s običnim događajima na elementima, možete implementirati mehanizam u kojem se kreira stranica će se pojaviti vizualno.

Pogledajmo sada odabir stavke ili predmeta. Činjenica odabira je izgled kontekstnog izbornika, na primjer, cilj je poravnati odabrano (lijevo, desno, središte), ili rasporediti elemente okomito ili vodoravno s istim korakom, ili promijeniti njihovu veličinu (minimalna, maksimalna) .

Automatski ponovni izračun koordinata i dimenzija je poželjniji od ručnog ponovnog izračunavanja. Manje grešaka – brže se postiže cilj. Osim toga, možete napraviti stranicu u jednom pregledniku, spremiti poziciju i veličinu elemenata. Otvaranjem ove stranice na pametnom telefonu možete ispraviti vrijednosti koordinata i dimenzija te ih zapamtiti za određeni model pametnog telefona ili verziju preglednika.

Dakle, ista stranica bez ručne usklađenosti sa zahtjevom za više preglednika imat će različite podatke za prikaz različitih uređaja i u raznim preglednicima.

Ako posjetitelju omogućite da samostalno izvrši ove postupke, kao i da odabere potrebne elemente stranice među onima koje je dao programer, možete osigurati kompatibilnost s više preglednika i potrebnu funkcionalnost stranice, uzimajući u obzir mišljenje korisnika .

HTML povuci i ispusti sučelja omogućuju aplikacijama korištenje značajki povuci i ispusti u preglednicima. Korisnik može odabrati povlačiti elemente mišem, povucite te elemente na a ispuštajući elementa i ispustite ih otpuštanjem tipke miša. Proziran prikaz povlačiti elementi prati pokazivač tijekom operacije povlačenja.

Za web stranice, proširenja i XUL aplikacije možete prilagoditi koji elementi mogu postati povlačiti, vrsta povratne informacije povlačiti elementi proizvode, i ispuštajući elementi.

Ovaj pregled HTML Drag and Drop uključuje opis sučelja, osnovne korake za dodavanje podrške povuci i ispusti aplikaciji i sažetak interoperabilnosti sučelja.

Povucite događaje

Bilješka: Ni dragstart ni dragend događaji se ne aktiviraju prilikom povlačenja datoteke u preglednik iz OS-a.

Sučelja

Osnove

Ovaj odjeljak sažetak je osnovnih koraka za dodavanje funkcije povuci i ispusti u aplikaciju.

Identificirajte što jest povlačiti

Izrada elementa povlačiti zahtijeva dodavanje atributa koji se može povući i globalnog rukovatelja događaja ondragstart, kao što je prikazano u sljedećem primjeru koda:

Ovaj element se može povući.

Za više informacija pogledajte:

Rukovati padom utjecaj

Rukovatelj za događaj ispuštanja može slobodno obraditi podatke o povlačenju na način specifičan za aplikaciju.

Obično aplikacija koristi metodu getData () za dohvat stavki povlačenja i zatim ih u skladu s tim obrađuje. Osim toga, semantika aplikacije može se razlikovati ovisno o vrijednosti

Gdje se GUI elementi implementiraju pomoću pseudo-grafike) pomoću miša ili zaslona osjetljivog na dodir.

Metoda se provodi "hvatanjem" (pritiskom i držanjem glavnog ( prvi, češće lijeva) tipka miša) objekta prikazanog na zaslonu računala, programski dostupnog za takvu operaciju, i premještanja na drugo mjesto (da promijeni mjesto) ili "bacivanja" na drugi element (za pozivanje odgovarajućeg radnja predviđena programom). U odnosu na prozore (koji se također mogu pomicati na ovaj način), ovaj se izraz obično ne koristi.

Osnovne radnje i najviše jednostavni primjeri radnje drag-and-drop su: pomicanje objekta, premještanje objekta s ploče na ploču, iako u modernom operativni sustavi ah povuci i ispusti se široko koristi i jedan je od glavnih načina interakcije s računalom u grafičkom korisničkom sučelju.

Objekti za kretanje mogu biti sljedeći elementi sučelja: ikone na radnoj površini (ikone), plutajuće alatne trake, programski prečaci na traci zadataka (od Win XP), elementi TreeView, tekstualni niz, DataGridView ćelija i OLE elementi. Objekti se mogu premještati unutar određenog definiranog područja, unutar jednog prozora, između panela jednog prozora i između različitih prozora.

Događaj povlačenja mora biti pokrenut nekom radnjom korisnika. Najčešće je ova radnja klikanje lijevom tipkom miša na element (ovaj događaj se zove MouseDown), koji se može premjestiti u njegov spremnik. Neke komponente imaju svoje početne događaje povuci i ispusti - na primjer, TreeView ima događaj ItemDrag.

Zaklada Wikimedia. 2010.

Pogledajte što je "povuci i ispusti" u drugim rječnicima:

Povucite i ispustite- 〈[dræg ənd drɔ̣p] n .; ; unz .; EDV〉 das Anklicken eines Objektes, das auf dem Computerbildschirm (in eine andere Datei bzw. an eine andere Stelle) verschoben u. dort wieder losgelassen wird [engl. povucite „ziehen“ + i „und“ + ispustite „fallen…… Universal-Lexikon

Oblik izvođenja bilo kakvih radnji u grafičkim korisničkim sučeljima, što podrazumijeva korištenje kompjuterski miš... U prijevodu s engleskog doslovno znači: povuci i ispusti. Radnja se izvodi upravljanjem onima vidljivim na ekranu ... ... Poslovni pojmovnik

povuci i ispusti- (računanje) Za pomicanje ikone, datoteke itd. preko zaslona pomoću miša i otpuštanje na drugom mjestu (povucite i ispustite pridjev) Glavni unos: povucite… Korisni engleski rječnik

povuci i ispusti- IT za premještanje nečega s jednog područja zaslona računala na drugo pomoću miša: "Softver vam omogućuje povlačenje i ispuštanje elemenata za slike stranice, tekst itd. gdje god želiš. Glavni unos: drag ... Financijski i poslovni uvjeti

povuci i ispusti- UK US glagol n .; Gen .:; Pl .: unz .; EDV〉 das Anklicken eines Objektes, das auf dem Computerbildschirm (in eine andere Datei bzw. an eine andere Stelle) verschoben u. dort wieder losgelassen wird)