Drag and drop: jak ovládat prvky uživatelského rozhraní

Nejjednodušší je něco vzít a dát, než psát to, co potřebujete vzít a kde to dát. Samozřejmě, bez myši nebo podobného zařízení, nebudete nic volit a nebudete specifikovat nic, ale i v současném stavu věcí je použití myšlenek "drag and drop" velmi přirozené a pohodlné.

Rozsahem této myšlenky jsou nejen online obchody, elektronické knihovny, vyhledávací nebo informační systémy, ale i aplikační sféra. Tato myšlenka je velmi užitečná při vývoji stránek a jejich prvků, vytvořených a udržovaných interaktivně bez účasti programátora.

Popis myšlenky

Vyberte, přemístěte a postavte - myšlenka je přirozená a pohodlná. Je úžasné, že se nenarodila, když se myš stala nepostradatelným pomocným počítačem.

Nejobvyklejším příkladem je výběr produktů v online obchodě. Vezměte požadovaný produkt pomocí myši a přetáhněte jej do nákupního košíku - jednoduše, přirozeně a pohodlně. Stahování souborů: odnášení dokumentu mimo okno prohlížeče a jeho uvedení na prvek stránky, čímž se iniciuje přenos dokumentu na server, je také praktickým nápadem.

Pro vývojáře je myšlenkou drag and drop manipulovat s prvky stránky bez manuálního přepočítání souřadnic a velikostí značek, možnost výběru více prvků a jejich zarovnání a přesunout strany blokových značek.

HTML a CSS jsou vynikající jazyky pro popis štítků a jejich stylů, ale když vývojář má schopnost interaktivně manipulovat prvky stránky bez manuálního přepočtu souřadnic a velikostí, je to práce pohodlnější a efektivnější.

Jednoduchý přenos souborů

"Drag and drop": překlad z angličtiny do ruštiny doslova zní "drag and drop". V praxi to zní a působí lépe: vybírá, přenáší a uvolňuje - prostě a přirozeně.

Provádění přenosu souborů na stránku, na server nebo pro jiné účely na stránce je velmi jednoduché.

V tomto příkladu myši vybralo několik souborů na ploše (obrázek vlevo). Ve výběru bylo stisknuto levé tlačítko myši a vybrané "šlo" do koše. Samotný prohlížeč ukázal, jak k tomu dojde, napsal nápovědu "kopírování" a kolem vytvořil obrysy přesunutých souborů.

Když se myška objevila nad košem, návštěvník uvolnil levé tlačítko myši, došlo k přetažení a na stránce webových stránek (spodní obrázek) kód JavaScript mohl přijímat a zpracovávat všechny soubory, které návštěvník poskytl stránce (webové stránce).

Popis implementace

Kód, který provádí tento postup, je velmi jednoduchý. Dokonce i nováček vývojář může opakovat to v jakýchkoli případech použití.

Uživatelské rozhraní je tvořeno dvěma značkami: scPlaceFile (toto je samotný koš, kde je třeba soubory umístit) a scPlaceFiles (je to výsledek zpracování souborů, v tomto případě jejich seznamu).

Logika stránky je následující. Když je stránka načtena do prohlížeče, obslužný program události "ondrop" je přiřazen do koše - má být vložen, ostatní události jsou zablokovány a nepoužívány.

Stránka funguje v normálním režimu, ale jakmile si návštěvník vybere soubory a přetáhne je do obrázku koše, tj. Na tagu scPlaceFile, spustí se událost "Soubor přijel".

Tento obslužný program jednoduše zobrazí seznam souborů. Jejich číslo je v event.dataTransfer.files.length a informace o každém souboru v souboru event.dataTransfer.files [i] .name. Vývojář určuje, co má dělat s přijatými daty, v tomto případě se jednoduše vytvoří seznam přijatých souborů.

Po zpracování je událost zablokována a není distribuována. To je nezbytné, aby se prohlížeč neangažoval v amatérských aktivitách a nezasahoval do zpracování získaných informací.

DnD a externích dat

Nahrávání snímků na server pomocí drag and drop je běžnou praxí při používání této technologie. Vývojář zpravidla vytváří formulář pro nahrání souboru (1), který funguje obvyklým způsobem (2). Návštěvník může obvykle vybrat soubory a nahrát je.

Pokud však návštěvník na určitém místě ve formuláři provede "přetažení", pole názvu souboru bude automaticky vyplněno.

To je dobré rozhodnutí. Za předpokladu, že v počítači není žádná myš, je samozřejmě velmi obtížné. Ale je lepší vytvořit uživatelské rozhraní v obvyklé verzi a v implementaci DnD.

DnD a interní data

Péče o zájmy návštěvníka je vždy důležitá, ale problémy developera jsou také důležité. Trasování a přetažení můžete provádět nejen standardními prostředky, ale i manipulací s událostmi myší na prvcích stránky.

Úloha výpočtu souřadnic značek a jejich velikosti se neustále vyskytuje. Manuální výpočet je dobrá praxe, ale interaktivní verze je výhodnější. Všechny tagy mají vždy obdélníkový tvar a při sledování událostí "myši" na stranách prvků můžete vytvořit schopnost automaticky přesouvat prvky na správné místo na stránce nebo je měnit.

Manipulace s událostí kliknutí myší - zapamatování souřadnic umístění kliknutí, například jedné ze stran prvku Pohybem myši - strana se pohybuje správným směrem. Uvolnění tlačítka myši - boční zastávky a změna souřadnic. Můžete tedy změnit polohu prvku nebo jeho velikost.

Formálně to není "drag and drop", ale efekt je podobný a praktický. Po vytvoření univerzálních ovladačů pro libovolný prvek stránky můžete získat dobrý interaktivní výsledek, urychlit vývoj a zjednodušit kód.

Vizuální a manuální programování

Myš na počítači a prsty na smartphonu jsou úplně odlišné přístupy k implementaci uživatelského rozhraní (návštěvník, vývojář). Je to zcela přirozený a moderní požadavek na kompatibilitu mezi prohlížeči.

To vše společně dělá obtížné vytvářet stránky, ale pomocí myšlenky "drag and drop" ve své standardní podobě s využitím jeho událostí, který kombinuje tento nápad s běžnými událostmi na elementy, můžete implementovat mechanismus, kterým se vytvoří stránka vizuálně.

Nyní zvážíme výběr prvku nebo prvků. Skutečnost výběru je vzhled kontextového menu, například cílem je zarovnání vybraných (levé, pravé, středové) nebo rozložení prvků svisle nebo vodorovně stejným krokem nebo jejich velikost (minimální, maximální).

Automatická přepočet souřadnic a velikostí je vhodnější než manuální. Méně chyb - rychlejší cíl. Kromě toho můžete vytvořit stránku v jednom prohlížeči, uložit polohu a velikost prvků. Otevřením této stránky ve smartphonu můžete opravit hodnoty souřadnic a velikostí a zapamatovat si je pro konkrétní model smartphonu nebo verzi prohlížeče.

Stejná stránka bez manuálního souladu s požadavky kompatibility mezi prohlížeči bude mít různé údaje pro zobrazení na různých zařízeních a v různých prohlížečích.

Pokud povolíte návštěvníkovi tyto procedury provádět samostatně, stejně jako vybrat požadované prvky stránek z těch, které poskytuje vývojář, můžete poskytnout kompatibilitu mezi prohlížeči a požadovanou funkčnost stránky s přihlédnutím k názorům uživatele.