Drag-and-drop: způsob manipulace s prvky uživatelského rozhraní - Technologické novinky a high-tech flipperworld.org

Nejjednodušší je přijmout a dát něco, než psát, co si vzít a kam dát. Samozřejmě, bez myši nebo zařízení, jako je tento, nevybíráte nic a neříkejte nic, ale i v současném stavu věcí je použití myšlenky drag and drop velmi přirozené a pohodlné.

Rozsah myšlenky - nejen online obchody, elektronické knihovny, vyhledávací nebo informační systémy, ale i aplikované pole. Tato myšlenka je velmi použitelná i při vývoji lokalit a jejich prvků, vytvořených a interaktivně doprovázených bez účasti programátora.

Popis nápadu

Vyberte, přesunout a umístit - myšlenka je přirozená a pohodlná. Je divné, že se nenarodila, když se myš stala nepostradatelným doplňkem k počítači. Nejzřejmějším příkladem je výběr zboží v online obchodě. Získejte správný produkt pomocí myši a přetáhněte jej do nákupního košíku - je to jednoduché, přirozené a pohodlné. Stahování souborů: odeberte dokument mimo okno prohlížeče a vložte jej na prvek stránky, čímž iniciujete přenos dokumentu na server - je to také praktický nápad.

Myšlenka developer «drag and drop» - je manipulací s ovládacími prvky na papíru bez ručního vypočtených souřadnic a velikost značek, schopnost vybrat více položek a jejich vyrovnání a pohybuje značky Block Party.

HTML a CSS jsou vynikající jazyky pro popis štítků a stylů jejich designu, ale když je vývojář schopen interaktivně manipulovat prvky stránky bez manuálníhopřevedením souřadnic a velikostí to činí práci pohodlnější a efektivnější.

Snadný přenos souborů

"Přetáhnout a přetáhnout": překlad z angličtiny do ruštiny doslova zní "vytáhnout a hodit". V praxi to zní a funguje lépe: vybírá, pohybuje se a uvolňuje - prostě a přirozeně. Implementace stránky na stránce pro přenos souborů na stránku, na server nebo pro jiné účely je velmi jednoduchá.

V tomto příkladu myši vybralo několik souborů na ploše (levá strana). Ve výběru bylo stisknuto levé tlačítko myši a vybrané "šlo" do koše. Samotný prohlížeč ukázal, jak se to děje, napsal příkaz "kopie" a vytvořil obrysy pohybujících se souborů.
Pokud je myš skončila koše, ať návštěvník levé tlačítko myši, akce „tah a hodit“ se stalo na místě (spodní obrázek) Javascript kódu schopné přijímat a zpracovávat všechny soubory, které poskytuje návštěvníka stránky (místo).

Popis implementace

Kód, který provádí tento postup, je velmi jednoduchý. Může se dokonce opakovat v jakékoli aplikaci, dokonce i vývojáři nováčků. Toto uživatelské rozhraní zahrnuje dvě značky: scPlaceFile (to je koš, kam umístit soubory) a scPlaceFiles (výsledek zpracování souborů, v tomto případě jejich seznam). Logika stránky je následující. Když se stránka načte v obsluze události prohlížeč přiřazen do košíku «onDrop» - uvedení dalších akcí jsou uzamčeny a nepoužívají.

Stránka funguje v normálním režimu, ale jakmile si návštěvník vybere soubory ajejich přetažením na obrázek koše, tj. na tagu scPlaceFile se spustí událost "files arrived".

Tento psovod jednoduše vytiskne seznam souborů. Jejich číslo se nachází v souboru event.dataTransfer.files.length a informace o každém souboru event.dataTransfer.files [i] .name. Co dělat s přijatými daty, určuje vývojáře, v tomto případě jednoduše vytvoří seznam přijatých souborů. Po zpracování je událost zablokována a neplatí. Je nutné, aby se prohlížeč nezaměstnával a nezasahoval do procesu zpracování získaných informací.

DnD a externí data

Nahrávání obrazů na server v "drag and drop" je obvyklá praxe používání této technologie. Vývojář zpravidla vytvoří formulář pro stažení souboru

, který funguje normálně

. Návštěvník může obvykle vybrat soubory a stáhnout je.
Pokud však návštěvník na určité místo formy dělat «drag and drop», pak soubor (y) Název pole se vyplní automaticky.

Toto je dobré rozhodnutí. Je samozřejmě velmi těžké přiznat, že na počítači není žádná myš. Ale je lepší rozvíjet uživatelské rozhraní obvyklým způsobem a implementací DnD.

DnD a interní data

Starostlivost o zájmy návštěvníků je vždy důležitá, ale problémy developera také záleží. Je možné implementovat "drag and drop" nejen standardními prostředky, ale také zpracováním událostí myši na prvky stránky. Úloha výpočtu hodnot souřadnic značek a jejich velikostí vzniká neustále. Manuální výpočet je dobrá praxe, ale interaktivní verze je výhodnější. Všechny štítky vždyjsou obdélníkového tvaru a sledování „myši“ události po stranách prvků, můžete vytvořit automatické přesouvat položky do kterého chcete stránku nebo změnit.

Zpracování události tlačítka myši je umístění kliknutí umístění, například jednoho z prvků prvku. Pohyb myši - strana se pohybuje správným směrem. Uvolněte tlačítko myši - boční zastávky a změní se souřadnice. Ano, můžete měnit pozici prvku nebo jeho velikost. Formálně to není "drag and drop", ale efekt je podobný a praktický. Vytvořením univerzálních ovladačů pro libovolnou položku na stránce 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 - zcela odlišné přístupy k implementaci uživatelského rozhraní (návštěvník, vývojář). Existuje zcela přirozený a moderní požadavek na crossbrowser.

To vše dohromady znesnadňuje vytvoření stránek, ale představa, že pomocí «drag and drop» ve standardní podobě, s využitím svého událost kombinující tuto myšlenku se pravidelných akcí v buňce, můžete realizovat mechanismus, podle kterého chcete vytvořit stránku bude vizuální. Nyní se podíváme na výběr prvku nebo prvků. Fakt výběr - kontextové menu, například cíl - vyhrazené zarovnání (vlevo, vpravo, uprostřed), nebo rozložení prvků svisle nebo vodorovně se stejným krokem, nebo změnit jejich velikost (na minimum,maximální). Automatická přepočet souřadnic a velikostí převážně ručně. Méně chyb - cíl je rychlejší. Kromě toho můžete vytvořit stránku v jednom prohlížeči, uložit pozici a velikost prvků. Otevřením této stránky na smartphonu můžete upravit hodnotu souřadnic a velikostí a pamatovat je na konkrétní model smartphonu nebo verze prohlížeče. Takže jedna stránka bez manuální kompatibility 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, aby provedl tyto postupy sám o sobě a také aby vybral potřebné prvky stránky z čísla poskytnutého vývojářem, může křížové procházení poskytnout potřebné funkce stránky s přihlédnutím k názoru uživatele.