Technologie Drag and Drop v systému Android. Technika drag-n-drop pomocí jQuery Co je to drag and drop

Nejjednodušší je něco vzít a dát to, než psát, co vzít a kam to dát. Bez myši nebo podobného zařízení si samozřejmě nemůžete nic vybrat a nic naznačit, ale i za současného stavu věcí je použití myšlenky „drag and drop“ velmi přirozené a pohodlné.

Rozsahem nápadu nejsou zdaleka jen internetové obchody, digitální knihovny, vyhledávací či informační systémy, ale i aplikovaný obor. Myšlenka je velmi použitelná při vývoji stránek a jejich prvků, vytvářených a udržovaných interaktivně, bez účasti programátora.

Popis myšlenky

Vyberte, přesuňte a umístěte - nápad je přirozený a pohodlný. Je úžasné, že se nezrodilo, když se myš stala nepostradatelným doplňkem počítače.

Nejviditelnějším příkladem je výběr produktu v internetovém obchodě. Vzít požadovaný produkt pomocí myši a přetáhnout jej do nákupního košíku je jednoduché, přirozené a pohodlné. Nahrávání souborů: Praktickým nápadem je také vzít dokument mimo okno prohlížeče a umístit jej na prvek stránky, čímž se spustí přenos dokumentu na server.

Pro vývojáře je myšlenka „drag and drop“ manipulace s prvky stránky bez ručního přepočítávání souřadnic a velikostí značek, možnost vybrat několik prvků a zarovnat je, stejně jako posouvat strany blokových značek.

HTML a CSS jsou vynikající jazyky pro popis značek a jejich stylů, ale když má vývojář možnost interaktivně manipulovat s prvky stránky bez ručního přepočítávání souřadnic a velikostí, je práce pohodlnější a efektivnější.

Snadný přenos souborů

„Drag and drop“: překlad z angličtiny do ruštiny zní doslova „drag and drop“. V praxi to zní a funguje lépe: vybrat, přenést a uvolnit – jednoduše a přirozeně.

Je velmi jednoduché implementovat na stránku přenos souborů na stránku, na server nebo pro jiné použití.

PROTI tento příklad myš vybrala několik souborů na ploše (obrázek vlevo). Na výběru bylo stisknuto levé tlačítko myši a vybraný "šel" do košíku. Prohlížeč sám ukázal, jak se to děje, napsal nápovědu „kopie“ a vytvořil obrysy souborů, které se mají přesouvat.

Když byla myš nad košem, návštěvník pustil levé tlačítko myši, došlo k události "drag and drop" a na stránce webu (dolní obrázek) byl kód JavaScriptu schopen přijmout a zpracovat všechny soubory, které návštěvník stránce (webu) poskytl.

Popis implementace

Kód, který tento postup provádí, je velmi jednoduchý. Dokonce i začínající vývojář to může zopakovat v jakémkoli případě použití.

Uživatelské rozhraní je zde reprezentováno dvěma tagy: scPlaceFile (toto je samotný košík, kam je potřeba vkládat soubory) a scPlaceFiles (toto je výsledek zpracování souborů, v tomto případě jejich seznamu).

Logika stránky je následující. Po načtení stránky v prohlížeči je v košíku přiřazen obslužný program události "ondrop" - což znamená, že zbytek událostí je zablokován a nepoužívá se.

Stránka funguje normálně, ale jakmile návštěvník vybere soubor(y) a přetáhne je na obrázek košíku, tedy na tag scPlaceFile, spustí se zpracování události „files added“.

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

Po zpracování je událost zablokována a není šířena. To je nezbytné, aby prohlížeč nebyl samostatně výdělečně činný a nezasahoval do zpracování obdržených informací.

DnD a externí data

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

Pokud však návštěvník určitého místa ve formuláři provede „drag and drop“, pak se pole názvu souboru (souborů) vyplní automaticky.

Tento dobré rozhodnutí... Je samozřejmě velmi těžké přiznat, že na počítači není myš. Ale je lepší navrhnout uživatelské rozhraní v obvyklá verze 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 důležité jsou i starosti developera. Drag and drop lze implementovat nejen standardními prostředky, ale také zpracováním událostí myši na prvcích stránky.

Úkol vypočítat hodnoty souřadnic značek a jejich velikostí neustále vyvstává. Ruční výpočet je dobrou praxí, ale interaktivní možnost je pohodlnější. Všechny značky jsou vždy obdélníkové a sledováním událostí myši po stranách prvků můžete vytvořit možnost automaticky přesouvat prvky na požadované místo na stránce nebo je měnit.

Ošetření události kliknutí tlačítkem myši - uložení souřadnic místa kliknutí, například jedné ze stran prvku. Pohybujte myší - strana se pohybuje požadovaným směrem. Uvolnění tlačítka myši - strana se zastaví a její souřadnice se změní. Tímto způsobem můžete změnit polohu prvku nebo jeho velikost.

Toto není formálně "drag and drop", ale efekt je podobný a praktický. Vytvořením univerzálních ovladačů pro jakýkoli prvek stránky můžete získat dobré interaktivní výsledky, urychlit vývoj a zjednodušit svůj kód.

Vizuální a ruční programování

Myš na počítači a prsty na smartphonu – absolutně různé přístupy k implementaci uživatelského rozhraní (návštěvník, vývojář). To je přirozený a moderní požadavek na kompatibilitu mezi různými prohlížeči.

To vše dohromady komplikuje vytváření stránek, ale uplatněním myšlenky „drag and drop“ ve standardní podobě, pomocí jejích událostí, kombinováním této myšlenky s běžnými událostmi na prvcích, můžete implementovat mechanismus, ve kterém vytvoření stránka se objeví vizuálně.

Nyní se podívejme na výběr položky nebo položek. Faktem výběru je vzhled kontextového menu, například cílem je zarovnat vybrané (vlevo, vpravo, na střed) nebo rozmístit prvky svisle nebo vodorovně se stejným krokem nebo změnit jejich velikosti (minimální, maximální) .

Automatický přepočet souřadnic a rozměrů je vhodnější než ruční přepočet. Méně chyb – cíle je dosaženo rychleji. Kromě toho můžete udělat stránku v jednom prohlížeči, uložit pozici a velikost prvků. Otevřením této stránky na smartphonu můžete opravit hodnoty souřadnic a rozměrů a zapamatovat si je pro konkrétní model smartphonu nebo verzi prohlížeče.

Takže stejná stránka bez ručního souladu s požadavkem pro různé prohlížeče bude mít různá data k zobrazení různá zařízení a v různých prohlížečích.

Pokud návštěvníkovi umožníte provádět tyto postupy samostatně a zároveň vyberete potřebné prvky stránky z prvků poskytnutých vývojářem, můžete zajistit kompatibilitu mezi prohlížeči a požadovanou funkčnost stránky s přihlédnutím k názoru uživatele. .

HTML Drag and Drop rozhraní umožňují aplikacím používat funkce přetahování v prohlížečích. Uživatel si může vybrat přetahovatelné prvky pomocí myši přetáhněte tyto prvky do a shazovatelné prvek a pusťte je uvolněním tlačítka myši. Průsvitné znázornění přetahovatelné prvky následují ukazatel během operace přetažení.

U webových stránek, rozšíření a aplikací XUL si můžete přizpůsobit, které prvky se mohou stát přetahovatelné, typ zpětné vazby přetahovatelné prvky produkují a shazovatelné Prvky.

Tento přehled HTML Drag and Drop obsahuje popis rozhraní, základní kroky pro přidání podpory přetahování do aplikace a souhrn interoperability rozhraní.

Přetáhněte události

Poznámka: Při přetahování souboru z operačního systému do prohlížeče se nespouštějí ani události dragstart ani dragend.

Rozhraní

Základy

Tato část je souhrnem základních kroků pro přidání funkce přetažení do aplikace.

Identifikujte, co je přetahovatelné

Vytváření prvku přetahovatelné vyžaduje přidání atributu draggable a obslužné rutiny globální události ondragstart, jak ukazuje následující ukázka kódu:

Tento prvek lze přetáhnout.

Další informace viz:

Zvládněte pokles účinek

Obslužná rutina události drop může zpracovávat data přetažení způsobem specifickým pro aplikaci.

Aplikace obvykle používá metodu getData () k načtení položek přetažení a následnému zpracování. Navíc se sémantika aplikace může lišit v závislosti na hodnotě

Kde jsou prvky GUI implementovány pomocí pseudo-grafiky) pomocí myši nebo dotykové obrazovky.

Metoda je implementována "capture" (stisknutím a podržením hlavního ( první, častěji levé) tlačítko myši) objektu zobrazeného na obrazovce počítače, programově dostupného pro takovou operaci, a jeho přesunutí na jiné místo (pro změnu jeho umístění) nebo "hození" na jiný prvek (pro vyvolání odpovídajícího akce poskytovaná programem). Ve vztahu k oknům (také schopným pohybu tímto způsobem) se tento termín obvykle nepoužívá.

Základní akce a nejvíce jednoduché příklady akce přetažení jsou: přesunutí objektu, přesunutí objektu z panelu na panel, i když v moderní podobě operační systémy ah drag-and-drop je široce používán a je jedním z hlavních způsobů interakce s počítačem v grafickém uživatelském rozhraní.

Objekty pro pohyb mohou být následující prvky rozhraní: ikony na ploše (ikony), plovoucí panely nástrojů, zástupci programů na hlavním panelu (od Win XP), prvky TreeView, textový řetězec, buňka DataGridView a také prvky OLE. Objekty lze přesouvat jak v rámci určité konkrétní oblasti, v rámci jednoho okna, mezi panely jednoho okna, tak mezi různými okny.

Událost přetažení musí být spuštěna nějakou akcí uživatele. Nejčastěji je touto akcí klepnutí levým tlačítkem myši na prvek (tato událost se nazývá MouseDown), který lze přesunout v jeho kontejneru. Některé komponenty mají své vlastní události spuštění přetažením – například strom TreeView má událost ItemDrag.

Nadace Wikimedia. 2010.

Podívejte se, co je to "Drag-and-drop" v jiných slovnících:

Drag and drop- 〈[dræg ənd drɔ̣p] n .; ; unz.; EDV〉 das Anklikken eines Objektes, das auf dem Computerbildschirm (in eine andere Datei bzw. an eine andere Stelle) verschoben u. dort wieder losgelassen wird [angl. drag „ziehen“ + a „und“ + drop „falled…… Universal-Lexikon

Forma provádění jakýchkoli akcí v grafických uživatelských rozhraních, což znamená použití počítačová myš... Přeloženo z angličtiny doslovně znamená: drag and drop. Akce se provádí ovládáním těch viditelných na obrazovce ... ... Obchodní glosář

drag and drop- (výpočetní technika) Přesunutí ikony, souboru atd. po obrazovce pomocí myši a její uvolnění na jiném místě (přídavné jméno přetáhněte) Hlavní položka: přetáhněte… Užitečný anglický slovník

drag and drop- IT přesunout něco z jedné oblasti obrazovky počítače do druhé pomocí myši: "Software vám umožňuje přetahovat prvky pro obrázky stránky, text atd. kdekoliv chceš. Hlavní položka: přetáhněte ... Finanční a obchodní podmínky

drag-and-drop- UK US sloveso n .; Gen.:; Pl .: unz .; EDV〉 das Anklikken eines Objektes, das auf dem Computerbildschirm (in eine andere Datei bzw. an eine andere Stelle) verschoben u. dort wieder losgelassen wird)