Drag-and-drop: Spôsob manipulácie prvkov používateľského rozhrania - Technologické správy a špičkové technológie flipperworld.org

Najjednoduchšie je vziať a dať niečo, ako napísať, čo má vziať a kam ju dať. Samozrejme, bez myši alebo zariadenia ako je tento, nevyberáte nič a nič nehovoríte, ale aj v súčasnom stave vecí je použitie myšlienky drag and drop veľmi prirodzené a pohodlné.

Rozsah myšlienky - nielen online obchody, elektronické knižnice, vyhľadávacie alebo informačné systémy, ako aj aplikované pole. Myšlienka je veľmi uplatniteľná aj pri vývoji lokalít a ich prvkov, vytvorených a interaktívne sprevádzaných bez účasti programátora.

Popis nápadu

Vyberte, presuňte a vložte - myšlienka je prirodzená a pohodlná. Je zvláštne, že sa nerodila, keď sa myš stala nevyhnutným doplnkom k počítaču. Najzrejmejším príkladom je výber tovaru v online obchode. Získajte správny produkt myšou a presuňte ho do nákupného košíka - je to jednoduché, prirodzené a pohodlné. Súbory na prevzatie: odoberte dokument mimo okna prehliadača a vložte ho na prvok stránky, čím iniciujete prenos dokumentu na server - je to aj praktický nápad.

Pre vývojára je myšlienkou "drag and drop" manipulácia s prvkami stránky bez manuálnej konverzie súradníc a veľkostí značiek, možnosť výberu viacerých prvkov a ich zarovnanie a posunutie strán blokových značiek.

HTML a CSS sú vynikajúce jazyky pre popis štítkov a štýlov ich dizajnu, ale keď vývojár má schopnosť interaktívne manipulovať prvky stránky bez manuálnehokonvertovaním súradníc a veľkostí, je to práca pohodlnejšia a efektívnejšia.

Jednoduchý prenos súborov

"Drag and drop": preklad z angličtiny na ruštinu doslova znie "ťahať a hodiť". V praxi to znie a funguje lepšie: vyber, pohybuje sa a uvoľňuje - spravodlivé a prirodzené. Implementácia stránky na stránke pre prenos súborov na stránku, na server alebo na iné účely je veľmi jednoduchá.

V tomto príklade má myš vybraná niekoľko súborov na pracovnej ploche (ľavá strana). Pri výbere bolo stlačené ľavé tlačidlo myši a vybrané "šiel" do košíka. Samotný prehliadač ukázal, ako sa to deje, napísal výzvu na kopírovanie a vytvoril obrysy premiestňovania súborov.
Ak je myš skončila koša, nech návštevník ľavé tlačidlo myši, akcie "ťah a hodiť" sa stalo na mieste (spodný obrázok) Javascript kódu schopné prijímať a spracovávať všetky súbory, ktoré poskytuje návštevníka stránky (miesto).

Popis implementácie

Kód, ktorý vykonáva tento postup, je veľmi jednoduchý. Dokonca sa to môže zopakovať aj v každej aplikácii, dokonca aj pri začínajúcom vývojári. Toto užívateľské rozhranie zahŕňa dve značky: scPlaceFile (to je kôš, kam umiestniť súbory) a scPlaceFiles (výsledok spracovanie súborov, v tomto prípade ich zoznam). Logika stránky je nasledovná. Keď sa stránka načíta v obsluhe udalosti prehliadač priradený do košíka «onDrop» - uvedenie ďalších akcií sú uzamknuté a nepoužívajú.

Stránka funguje v bežnom režime, ale akonáhle si návštevník vyberie súbor (y) aich presunutím na obrázok koša, to znamená, že na značke scPlaceFile sa spustí udalosť "files arrived".

Tento popisovač jednoducho vytlačí zoznam súborov. Ich číslo je umiestnené v event.dataTransfer.files.length a informácie o každom súbore event.dataTransfer.files [i] .name. Čo robiť s prijatými dátami, určuje vývojára, v tomto prípade jednoducho vytvoril zoznam prijatých súborov. Po spracovaní udalosť je zablokovaná a neplatí. Je potrebné, aby sa prehliadač nezúčastňoval na samostatnej zárobkovej činnosti a nezasahoval do procesu spracovávania prijatých informácií.

DnD a externé dáta

Odovzdávanie obrázkov na server v "drag and drop" je bežnou praxou používania tejto technológie. Vývojár spravidla vytvorí formulár na stiahnutie súboru

, ktorý funguje normálne

. Návštevník môže zvyčajne vyberať súbory a sťahovať ich.
Ak však návštevník určitého miesta formulára urobí "drag and drop", automaticky sa vyplní pole názvu súboru (súboru).

Toto je dobré rozhodnutie. Je samozrejme veľmi ťažké pripustiť, že na počítači nie je žiadna myš. Ale je lepšie rozvíjať používateľské rozhranie bežným spôsobom a implementáciou DnD.

DnD a interné údaje

Starostlivosť o záujmy návštevníka je vždy dôležitá, ale problémy developera sú tiež dôležité. Je možné realizovať "drag and drop" nielen štandardnými prostriedkami, ale aj spracovaním udalostí myši na prvky stránky. Úloha výpočtu hodnôt súradníc značiek a ich veľkostí vzniká neustále. Manuálny výpočet je dobrá prax, ale interaktívna verzia je výhodnejšia. Všetky značky vždysú obdĺžnikového tvaru a sledovania "myši" udalosti po stranách prvkov, môžete vytvoriť automatické presúvať položky do ktorého chcete stránku alebo zmeniť.

Spracovanie udalosti tlačidla myši je umiestnenie kliknutia na miesto, napríklad jeden z prvkov prvku. Pohybujte myšou - strana sa pohybuje správnym smerom. Uvoľnite tlačidlo myši - bočné dorazy a zmeny súradníc. Áno, môžete zmeniť pozíciu prvku alebo jeho veľkosť. Formálne to nie je "drag and drop", ale efekt je podobný a praktický. Vytváraním univerzálnych manipulátorov pre ľubovoľnú položku na stránke môžete získať dobrý interaktívny výsledok, urýchliť vývoj a zjednodušiť kód.

Vizuálne a manuálne programovanie

Počítačová myš a prsty na smartphone - úplne odlišné prístupy k realizácii používateľského rozhrania (Návštevník developer). Existuje úplne prirodzená a moderná požiadavka crossbrowser.

To všetko dohromady sťažuje vytvorenie stránok, ale predstava, že pomocou «drag and drop» v štandardnej podobe, s využitím svojho udalosť kombinujúci túto myšlienku sa pravidelných akcií v bunke, môžete realizovať mechanizmus, podľa ktorého chcete vytvoriť stránku bude vizuálne. Teraz sa pozrime na výber prvku alebo prvkov. Fakt výber - kontextové menu, napríklad cieľ - vyhradené zarovnanie (vľavo, vpravo, uprostred), alebo rozloženie prvkov zvisle alebo vodorovne s rovnakým krokom, alebo zmeniť ich veľkosť (na minimum,maximum). Automatické prepočítanie súradníc a veľkostí prevažne manuálne. Menej chýb - cieľ je rýchlejší. Okrem toho môžete vytvoriť stránky v jednom prehliadači, uložiť pozíciu a veľkosť prvkov. Otvorením tejto stránky na smartfóne môžete upraviť hodnotu súradníc a veľkostí a zapamätať si ich pre konkrétny model verzie smartfónu alebo prehliadača. Jedna a tá istá stránka bez manuálnej kompatibility bude mať rôzne údaje, ktoré sa zobrazia na rôznych zariadeniach av rôznych prehliadačoch.

Ak povolíte návštevníkovi, aby tieto postupy vykonal sám a tiež vybral potrebné prvky stránky z čísla poskytnutého vývojárom, krížové prehliadanie môže poskytnúť potrebné funkcie stránky s prihliadnutím na názor používateľa.