Nejjednodušší je něco vzít a dát to, než psát, co vzít a kam to dát. Samozřejmě bez myši nebo podobného zařízení nic nevyberete a nic nenaznačíte, ale i za současného stavu věcí je využití myšlenky „drag and drop“ velmi přirozené a pohodlné.

Záběrem nápadu nejsou zdaleka jen internetové obchody, elektronické knihovny, vyhledávače popř Informační systémy, ale i aplikovaná sféra. 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 - skvělé jazyky popisy značek a styly jejich designu, 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í.

V tomto příkladu bylo pomocí myši vybráno 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šíkem, návštěvník uvolnil levé tlačítko myši, došlo k akci přetažení 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 poskytnutý stránce (webu).

Popis realizace

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 (to je samotný košík, kam je potřeba vkládat soubory) a scPlaceFiles (to 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“ - ostatní události jsou blokovány a nepoužívají 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 vstoupit normální mód vyberte soubory a nahrajte je.

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

to dobré rozhodnutí... Je samozřejmě velmi těžké přiznat, že na počítači není myš. Ale je lepší navrhnout uživatelské rozhraní běžným způsobem 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 obavy developerů. 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.

Zpracování události kliknutí na tlačítko myši - zapamatování 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 jsou zcela odlišné 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 ztěžuje vytváření stránek, ale uplatnění myšlenky „drag and drop“ v něm standardní forma pomocí jeho 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 bude tvorba stránky probíhat 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 vytvořit stránku v jednom prohlížeči, uložit pozici a velikost prvků. Po otevření této stránky na smartphonu můžete opravit hodnoty souřadnic a rozměrů a zapamatovat si je konkrétní model verzi smartphonu nebo 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 požadované 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. .

Drag and Drop může pomoci zvýšit výkon vašeho iPadu. Zde je návod, jak jej můžete použít.

Můžete tedy přesunout soubor z jedné služby cloudového úložiště do druhé, zkopírovat text ze Safari do aplikace pro úpravu textu a přidat nabídku nebo vytvořit záloha určité fotografie v aplikaci pro ukládání souborů.

Jak přetahovat fotografie, soubory a text

1. Dotkněte se a podržte fotografii, soubor nebo zvýrazněný text, který chcete přetáhnout do jiné aplikace.

2. Přetáhněte položku na požadované místo tato příloha nebo jiný, který jste otevřeli v Slide Over nebo Split View, a uvolněte.

Jak přetáhnout více fotografií nebo souborů současně

1. Dotkněte se a podržte jednu z fotografií nebo souborů, které chcete přetáhnout.

2. Při přetahování aktuální položky klepněte na jinou fotografii nebo soubor, který chcete také přetáhnout. Udělejte to znovu s tolika předměty, kolik chcete přesunout.

3. Přetáhněte všechny vybrané objekty na určené místo v jiné aplikaci, kterou jste otevřeli v Slide Over nebo Split View, a uvolněte je.

Jak přetahovat text z jedné aplikace do druhé

1. Dotkněte se a podržte část textu, kterou chcete přetáhnout, a vyberte ji.

2. Pomocí výběrových bodů vyberte zbytek textu, který chcete přetáhnout.

3. Stiskněte a podržte zvýrazněný text.

4. Přetáhněte text do aplikace, kam jej chcete umístit, a uvolněte jej.

Jak změnit uspořádání ikon několika aplikací najednou pomocí "Drag and Drop"

Zatímco většina funkcí přetažení v systému iOS funguje pouze na iPadu, tento trik ve skutečnosti funguje na iPhonu i iPadu. To vám umožní organizovat uspořádání aplikací na domovské obrazovce pomocí « Drag and Drop “místo přesouvání po jednom.

1. Stiskněte a podržte ikonu aplikace, kterou chcete změnit na domovské obrazovce.

2. Klepněte na další aplikace, které chcete také přesunout.

3. Přetáhněte tyto aplikace na stránku nebo složku, kde je chcete mít, a uvolněte je.

182

V tomto příkladu vybereme prvek div a vyvoláme jej plovoucí přetahovací () metoda... Jak je znázorněno na obrázku níže, prvek v otevřeném dokumentu zaujme svou normální pozici, ale poté jej lze přesunout ukazatelem myši na libovolné místo v okně prohlížeče:

Funkce drag-and-drop je užitečná sama o sobě, ale ještě užitečnější je při použití ve spojení s interakcí Droppable, která je popsána níže.

Interakce Draggable je implementována výhradně pomocí specifických značek HTML a stylů CSS. To znamená, že tato funkcionalita bude fungovat téměř v jakémkoli prohlížeči, ale prvky jí obdařené nebudou moci fungovat s podobnými nativními nástroji přetahování. operační systémy.

Operace drag-and-drop definované specifikací HTML5 jsou obvykle implementovány pomocí nativních mechanismů operačních systémů. Pokud používáte mechanismus jQuery UI Drag-and-drop, je nejlepší zakázat ekvivalentní funkce HTML5, abyste předešli konfliktům. Za tímto účelem nastavte atribut draggable prvku těla dokumentu na hodnotu false.

Konfigurace přetahovatelné interakce

Existuje mnoho možností přizpůsobení pro interakci s možností přetažení. Nejdůležitější vlastnosti, které jsou diskutovány v následujících částech, jsou uvedeny v tabulce níže:

Vlastnosti interakce přetažení

Vlastnictví	Popis
osa	Omezuje pohyb do konkrétních směrů. Výchozí hodnota je false, což znamená žádná omezení, ale můžete také zadat „x“ (pohyb pouze podél osy X) nebo „y“ (pohyb pouze podél osy Y).
zadržování	Omezí polohu plovoucího prvku na určitou oblast obrazovky. Typy podporovaných hodnot jsou popsány v tabulce níže pomocí odpovídajícího příkladu. Výchozí hodnota je false, což znamená žádná omezení
zpoždění	Určuje, jak dlouho musí být prvek tažen, než se přesune. Výchozí hodnota je 0, což znamená žádné zpoždění
vzdálenost	Určuje vzdálenost, o kterou musí uživatel přetáhnout prvek z jeho výchozí pozice, než se skutečně přesune. Výchozí hodnota je 1 pixel
mřížka	Vynutí přichycení přesunutého prvku k buňkám mřížky. Výchozí hodnota je false, což znamená bez vazby

Omezující směry pohybu

Existuje několik způsobů, jak můžete omezit pohyb prvku do určitých směrů. První je použití možnosti osy k omezení směru pohybu na osu X nebo Y. Příklad je uveden níže:

...

Spustit příklad

V tomto příkladu definujeme dva prvky div, vybereme je pomocí pomocí jQuery a zavolejte metodu draggable (). Této metodě je předán objekt jako argument, který zpočátku omezuje pohyb obou divů podél osy X. Poté použitím metody jQuery filter () jsme schopni vybrat prvek dragV, aniž by jQuery znovu prohledával celý dokument a nastavte jej na jiný povolený směr pohybu – podél osy Y, čímž získáme dokument, ve kterém lze jeden div táhnout pouze svisle a druhý pouze vodorovně. Výsledek je znázorněn na obrázku:

Omezení rozsahu pohybu prvku

Můžete také omezit oblast obrazovky, kam můžete přetáhnout položku. K tomu slouží možnost kontejnmentu. Formáty hodnot, které lze zadat v této možnosti, jsou popsány v tabulce níže:

Níže je uveden příklad použití možnosti omezení:

...

Spustit příklad

V tomto příkladu je možnost přesouvat oba prvky omezena tak, že je lze dovnitř pouze přetáhnout nadřazený prvek, což je div. Pro jeden z plovoucích divů pomocí zavedená možnost osy dodatečné omezení, což znamená, že se může uvnitř nadřazeného prvku pohybovat pouze vodorovně. Výsledek je znázorněn na obrázku:

Omezení možnosti přesunout položku do buněk mřížky

Možnost mřížky umožňuje nastavit přichycení přesouvané položky k buňkám mřížky. Tato možnost bere jako hodnotu pole dvou prvků, které definují šířku a výšku buněk mřížky v pixelech. Níže je uveden příklad použití možnosti mřížky:

...

Spustit příklad

Tento příklad má mřížku s buňkami o šířce 100 pixelů a výšce 50 pixelů. Když položku přetáhnete, „skočí“ z jedné (neviditelné) buňky do druhé. Efekt přichycení je velmi dobrým příkladem využití interakční funkčnosti, ale je obtížné jej zprostředkovat pomocí snímků obrazovky.

Efekt uchopení můžete vytvořit pouze pro jeden směr nastavením osy volného pohybu na 1. Pokud například nastavíte možnost mřížky na hodnotu, položka se při vodorovném pohybu přichytí k buňkám mřížky o velikosti 100 pixelů, ale svisle se bude pohybovat volně .

Zpoždění přesunu

Existují dvě možnosti, které umožňují zpozdit přetahování přesouvané položky. Možnost zpoždění lze použít k nastavení doby v milisekundách, po kterou musí uživatel táhnout myší, než se prvek skutečně přesune. Jiný druh zpoždění poskytuje možnost distance, která určuje vzdálenost v pixelech, o kterou musí uživatel táhnout ukazatel myši, než za ním následuje prvek.

Níže je uveden příklad použití obou nastavení:

...

Spustit příklad

V tomto příkladu jsou dva pohyblivé prvky, z nichž jeden má zpoždění specifikované pomocí možnosti zpoždění a druhý pomocí možnosti vzdálenosti.

V případě zpoždění určeného volbou zpoždění musí uživatel táhnout po zadanou dobu, než prvek skutečně přesune. V tomto příkladu je trvání tohoto intervalu 1000 ms. V tuto chvíli není vůbec nutné hýbat myší, ale po celou dobu prodlevy musí zůstat tlačítko myši stisknuté, poté je možné prvek pohybovat pohybem myši. Když uplyne doba prodlevy, přesouvaná položka se přichytí k umístění ukazatele myši, v závislosti na omezeních uložených možnostmi mřížky, oblasti a osy diskutovanými výše.

Volba vzdálenosti má podobný účinek, ale v tomto případě musí uživatel táhnout ukazatel myši alespoň o zadaný počet pixelů v libovolném směru od počáteční polohy prvku. Přesouvaná položka pak přeskočí na aktuální umístění ukazatele.

Pokud použijete obě nastavení na stejný prvek, pak se přesunutý prvek nepohne, dokud nebudou splněna obě kritéria zpoždění, tj. dokud pokus o přetažení prvku netrvá po určenou dobu a dokud se ukazatel myši nepohne o zadaný počet pixelů.

Použití přetahovatelných interakčních metod

Všechny metody definované pro interakce Draggable jsou součástí základní sady metod, které jste již viděli při pohledu na widgety. Metody specifické pro Draggable interakci nejsou poskytovány, takže se jimi nebudeme podrobně zabývat. Seznam dostupných metod je uveden v tabulce níže:

Použití přetahovatelných interakčních událostí

Draggable Interaction podporuje jednoduchou sadu událostí, které upozorní na přetažení položky. Tyto události jsou popsány v tabulce níže:

Stejně jako u událostí widgetu můžete na tyto události také reagovat. Níže je uveden příklad zpracování událostí spuštění a zastavení:

...

Spustit příklad

Tento příklad používá události start a stop ke změně textového obsahu prvku při jeho přetahování. Tato příležitost je způsobena skutečností, že interakce Draggable je implementována výhradně pomocí HTML a CSS: můžete použít jQuery ke změně stavu plovoucího prvku, i když se pohybuje po obrazovce.

Použití droppable interakce

V některých situacích může postačovat samotná schopnost přetáhnout prvek, ale nejužitečnější je, když se použije ve spojení s interakcí s možností přetažení.

Prvky, u kterých byla použita interakce s možností přetažení (přijímající prvky), získávají schopnost přijímat plovoucí prvky vytvořené pomocí interakce Draggable.

Přijímací položky jsou vytvořeny pomocí droppable () metoda ale k získání užitečné funkce budete muset vytvořit obslužné rutiny událostí z těch, které jsou definovány pro tento typ interakce. Dostupné události jsou uvedeny v tabulce níže:

Události interakce, které lze zahodit

událost	Popis
vytvořit	Vyskytuje se, když je na prvek aplikována interakce s možností přetažení
aktivovat	Nastane, když uživatel začne přetahovat plovoucí položku
deaktivovat	Nastane, když uživatel přestane přetahovat plovoucí položku
přes	Vyskytuje se, když uživatel přetáhne plovoucí prvek přes přijímající prvek (ale za předpokladu, že myš ještě nebyla uvolněna)
ven	Vyskytuje se, když uživatel přetáhne plovoucí prvek mimo přijímající prvek
upustit	Vyskytuje se, když uživatel zanechá plovák na přijímacím prvku

Níže je uveden příklad vytvoření jednoduchého přijímacího prvku pomocí obslužné rutiny události s jedním dropem:

...

Spustit příklad

V tomto příkladu byl do dokumentu přidán prvek div s textovým obsahem reprezentovaným řádkem „Nechte zde“. Tento prvek vybereme pomocí jQuery a zavoláme metodu droppable () a předáme mu objekt nastavení, který definuje handler pro událost drop. Odezvou na tuto událost je změna textu plovoucího prvku pomocí metody text ().

Interakce přetažením vytvořená v tomto příkladu je velmi základní, ale poskytuje vhodný kontext pro vysvětlení možností. pracovat spolu interakce Draggable a Droppable. Různé fáze procesu drag-and-drop jsou znázorněny na obrázku:

Všechno to vypadá velmi jednoduše. Přetahujeme plovoucí prvek, dokud není nad přijímacím prvkem a uvolňujeme jej. Přesouvaná položka zůstane tam, kde byla vypuštěna, a její textový obsah se změní v reakci na událost upuštění. Následující části ukazují, jak používat další události interakce s možností droppable ke zlepšení uživatelského zážitku.

Zvýraznění cílového přijímajícího objektu

Pomocí událostí aktivace a deaktivace můžete zvýraznit cílový přijímající objekt, když uživatel zahájí proces přetahování. V mnoha situacích je tato myšlenka velmi plodná, protože uživateli poskytuje spolehlivou informaci o tom, které prvky jsou součástí modelu drag-and-drop. Relevantní příklad je uveden níže:

... $ (funkce () ($ ("# možnost přetažení"). přetažení (); $ ("# možnost přetažení"). možnost přetažení ((upuštění: funkce () ($ ("# možnost přetažení")). text ("Vlevo ")), aktivujte: funkci () ($ (" # droppable "). css ((ohraničení:" střední dvojitá zelená ", backgroundColor:" lightGreen "));), deaktivujte: funkci () ($ (" # droppable ") .css (" ohraničení "," ") .css (" barva pozadí "," ");)));)); ... Spustit příklad

Jakmile uživatel začne přetahovat prvek, spustí se událost activate - spojená s naším přijímajícím prvkem a funkce handler použije ke změně metodu css (). Vlastnosti ohraničení CSS a barvu pozadí tohoto prvku. Výsledkem je, že cílový přijímací prvek je zvýrazněn, což uživateli signalizuje, že mezi ním a plovoucím prvkem existuje vztah.

Událost deactivate se používá k odstranění hodnot vlastností CSS z přijímajícího prvku a jeho obnovení do původního stavu, jakmile uživatel uvolní tlačítko myši. (K této události dochází vždy, když se tažení prvku zastaví, ať už je tažený prvek ponechán na přijímajícím prvku nebo ne.) Tento proces je znázorněn na obrázku:

Manipulace s překrývajícími se prvky

Přetahování lze vylepšit přidáním manipulace s událostmi. Událost over nastane, když je 50 % plovoucího prvku nad jakoukoli částí přijímacího prvku. K události out dojde, když se dříve překrývající se prvky již nepřekrývají. Příklad reakce na tyto události je uveden níže:

$ (funkce () ($ ("# možnost přetažení"). možnost přetažení (); $ ("# možnost přetažení"). možnost přetažení ((úpuštění: funkce () ($ ("# možnost přetažení"). text ("zahozeno")) , aktivovat: function () ($ ("# droppable"). css ((ohraničení: "střední dvojitá zelená", backgroundColor: "lightGreen"));), deaktivovat: function () ($ ("# droppable"). css ("border", "") .css ("background-color", "");), over: function () ($ ("# droppable"). css ((border: "medium double red", backgroundColor : "red"));), out: function () ($ ("# droppable"). css ("border", "") .css ("background-color", "");)));) ); Spustit příklad

Jsou zde použity stejné funkce obsluhy jako v předchozím příkladu, ale v tomto případě jsou spojeny s událostmi over a out. Když se alespoň 50 % plovoucího prvku překrývá s přijímajícím prvkem, je orámován a jeho barva pozadí se změní, jak je znázorněno:

Uvedená 50% hranice se nazývá prahová hodnota překrytí (tolerance), jejíž hodnotu lze nastavit při vytváření přijímacího prvku, jak bude uvedeno níže.

Nastavení droppable interakce

Droppable má řadu vlastností pro interakci, které lze změnit a přizpůsobit tak jeho chování. Tyto vlastnosti jsou uvedeny v tabulce níže:

Vlastnosti interakcí s možností dropování

Vlastnictví	Popis
zakázáno	Pokud je tato možnost pravdivá, pak je funkce interakce s možností zahození zpočátku zakázána. Výchozí hodnota je false
přijmout	Zúží množinu plovoucích prvků, na které bude přijímající prvek reagovat. Výchozí hodnota je *, odpovídá libovolnému prvku
aktivní třída	Definuje třídu, která má být přiřazena v reakci na událost activate a odstraněna v reakci na událost deactivate
hoverClass	Definuje třídu, která má být přiřazena v reakci na událost over a odstraněna v reakci na událost out
tolerance	Určuje minimální stupeň překrytí, při kterém dojde k události over

Omezení povolených plovoucích položek

Je možné omezit množinu plovoucích prvků, které bude Droppable akceptovat, pomocí volby accept. Možnost přijmout by měla být nastavena na selektor. V důsledku toho k událostem interakce s možností zahození dojde pouze v případě, že vyhazovaná položka odpovídá zadanému selektoru. Relevantní příklad je uveden níže:

...

Spustit příklad

V tomto příkladu jsou dva plováky, drag1 a drag2. Při vytváření přijímacího prvku se používá volba accept, pomocí které naznačíme, že pouze drag1 bude přijatelným plovoucím prvkem.

Při přetahování drag1 uvidíte stejný efekt jako v předchozích příkladech. Události aktivace, deaktivace, přepnutí a vypnutí se ve vhodnou dobu spustí na přijímající prvek. Pokud zároveň přetáhnete prvek drag2, který neodpovídá selektoru uvedenému v parametru accept, tyto události se nespustí. Tento prvek lze volně pohybovat, ale nebude vnímán přijímajícím prvkem.

Všimněte si změny ve způsobu výběru přijatelného float, pro který byste měli volat metodu text (). Když byl v dokumentu pouze jeden pohyblivý prvek, stačil k tomu atribut id:

Drop: function () ($ ("# přetažení") Text ("Left")),

V tomto příkladu jsou dva prvky float a výběr atributu id nepřinese požadovaný výsledek, protože text se v tomto případě vždy změní ve stejném prvku float, bez ohledu na to, který je pro přijímající prvek přijatelný.

Cesta ven je použít objekt uživatelského rozhraní, který poskytuje uživatelské rozhraní jQuery jako další argument pro každou obsluhu události. Vlastnost draggable objektu uživatelského rozhraní vrátí objekt jQuery obsahující prvek, který uživatel přetáhne nebo se jej pokusí ponechat na cílovém prvku, což umožňuje vybrat požadovaný prvek následovně:

Drop: funkce (událost, ui) (ui.draggable.text ("Opuštěno")),

Změna prahu překrytí

Ve výchozím nastavení se událost over spustí pouze tehdy, když se alespoň 50 % plovoucího prvku překrývá s přijímajícím prvkem. Hodnotu tohoto prahového překrytí lze změnit pomocí možnosti tolerance, která může nabývat hodnot uvedených v tabulce níže:

Nejčastěji používám dvě hodnoty, fit a touch, protože jejich význam je pro uživatele nejsrozumitelnější. Hodnotu přizpůsobení používám v případech, kdy by tažený prvek měl zůstat v oblasti přijímacího prvku, do kterého byl přesunut, a hodnotu dotyku - kdy by se měl přesunutý prvek vrátit do své původní polohy (příklad bude uveden níže ). Níže je uveden příklad použití parametrů přizpůsobení a dotyku:

Hodnota klonu říká uživatelskému rozhraní jQuery, aby vytvořilo kopii plovoucího prvku spolu s veškerým jeho obsahem a použilo výsledek jako pomocný prvek. Výsledek je znázorněn na obrázku:

Pomocník je odstraněn, když uživatel uvolní tlačítko myši nad plovoucím prvkem a ponechá plovoucí a přijímající prvky v jejich původní poloze.

Jak je znázorněno na obrázku, původní plovoucí prvek zůstává na místě a pouze pomocný prvek se pohybuje po obrazovce podle ukazatele myši. Pokud jsou rozměry přesouvaného prvku velké, jako v našem příkladu, pak pokrývá zbytek prvků dokumentu, takže i uživatel bude obtížně sledovat polohu přijímajícího prvku. Tento problém lze vyřešit poskytnutím funkce jako hodnoty možnosti pomocníka, jak je znázorněno v příkladu níže:

... $ (funkce () ($ ("div.draggable") .. png "/>")))); $ ("# košík"). možnost přetažení ((activeClass: "aktivní", hoverClass: "hover")); )); ... Spustit příklad

Když uživatel začne přetahovat prvek, jQuery UI zavolá funkci, dáno parametrem helper a použije vrácený prvek jako float. V tomto případě používám jQuery k vytvoření prvku img. Výsledek je znázorněn na obrázku:

Malý obrázek funguje jako zástupný symbol pro prvek, který se přesouvá, takže je mnohem snazší sledovat ostatní prvky v dokumentu.

Uživatelské rozhraní, které jQuery UI odesílá do událostí interakce Droppable, obsahuje vlastnost helper a tuto vlastnost lze použít k manipulaci s helperem při jeho přetahování. Níže je uveden příklad použití této vlastnosti ve spojení s událostmi over and out:

... $ (funkce () ($ ("div.draggable") .. png "/>")))); $ ("# košík"). možnost přetažení ((activeClass: "aktivní", hoverClass: "hover", over: function (event, ui) (ui.helper.css ("hranice", "tlusté těleso # 27e6ed")) , out: funkce (událost, ui) (ui.helper.css ("hranice", "")))); )); ...

Zde se události over a out, stejně jako vlastnost ui.helper, používají k zobrazení okraje kolem pomocníka, když překrývá přijímající prvek. Výsledek je znázorněn na obrázku:

Přichyťte se k okrajům prvků

Používáním možnosti uchopení můžete dosáhnout toho, že se přesouvaný prvek „přitáhne“ k okrajům prvků, vedle kterých prochází. Tato možnost má jako hodnotu selektor. Plovoucí prvek se přichytí k okrajům jakéhokoli prvku, který odpovídá zadanému selektoru. Níže je uveden příklad použití možnosti uchopení:

Spustit příklad

Když se pohybovaný prvek přiblíží k jednomu z vhodných prvků, je k němu jakoby „přitažen“ tak, že se jejich sousední hrany dotýkají. Pro takovou vazbu můžete vybrat jakýkoli prvek, nejen přijímající. V tomto příkladu jsem přidal prvek div a nastavil možnost uchopení na hodnotu, která vybere daný prvek v dokumentu a také přijímající prvek.

Existuje několik pomocných možností, které vám umožní doladit vazebné chování prvků. Jedním z nich je možnost snapMode... Lze jej použít k určení typu vazby. Přijímají se následující hodnoty: vnitřní(přichycení k vnitřním okrajům prvků), vnější(přichycení k vnějším okrajům prvků) a oba(přichytit ke všem hranám; výchozí).

Možnost SnapTolerance umožňuje určit, jak daleko by se měl plovoucí prvek přiblížit k okraji cílového prvku, než dojde k přichycení. Výchozí hodnota je 20, což znamená 20 pixelů. V příkladu je použita hodnota 50, která odpovídá přichycení na větší vzdálenost. Je velmi důležité vybrat správnou hodnotu pro tuto možnost. Pokud je hodnota snapTolerance příliš malá, uživatel si efektu uchopení nemusí všimnout, a pokud je příliš velká, přesouvaná položka začne nečekaně přeskakovat a přichytávat se ke vzdáleným položkám.

Pro knihovnu VCL Borland implementoval svou vlastní verzi rozhraní Drag & Drop (přeloženo jako „drag and drop“). Toto rozhraní je interní - uvnitř formuláře můžete odesílat a přijímat jakékoli ovládací prvky Delphi "(kromě formuláře samotného). Je implementováno bez použití odpovídajících funkcí Windows API - je nutné je použít při organizaci komunikace s jinými úlohami přetažením a shazování.

Stisknutím levého tlačítka myši nad ovládacím prvkem jej můžeme „přetáhnout“ na jakýkoli jiný ovládací prvek. Z pohledu programátora to znamená, že v momentech tažení a uvolnění klávesy se generují určité události, které předávají všechny potřebné informace - ukazatel na tažený objekt, aktuální souřadnice kurzoru atd. tento moment kurzor je umístěn. Obsluha takové události by měla systému sdělit, zda daný ovládací prvek „odesílá“ či nikoli. Po uvolnění tlačítka nad přijímacím ovládáním se vygeneruje jedna nebo dvě další události v závislosti na připravenosti přijímače.

ZrušitPřetažení Zruší aktuální operaci přetažení nebo přetažení.

Funkce FindDragTarget (const Poz: TPoint; AllowDisabled: Boolean): TControl;

Funkce vrací objekt základní třídy TControl , kterému náleží poloha obrazovky se souřadnicemi určenými parametrem Pos. Tato funkce se používá k určení potenciálního příjemce operace přetažení nebo přetažení. Pokud pro zadanou pozici neexistuje žádný ovládací prvek okna, funkce se vrátí nula ... Parametr AllowDisabled určuje, zda se počítají zakázané objekty.

Funkce IsDragObject (Sender: TObject): Boolean;

Funkce určuje, zda je objekt zadaný v parametru Sender potomkem třídy TDragObject . Tato funkce lze použít jako parametr Zdroj v obslužných rutinách událostí OnDragOver a OnDockOver k určení, zda bude přetažený objekt přijat. Také funkce IsDragObjectlze použít jako parametr Zdroj v obslužných rutinách událostí OnDragDrop a OnDockDrop ke správné interpretaci přetaženého objektu.

DragMode, vlastnosti DragCursor, BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, metody OnStartDrag, parametr Accept

Proces přetahování informací z jednoho objektu do druhého je ve Widows široce používán. Můžete přesouvat soubory mezi složkami, přesouvat složky a další.

Všechny vlastnosti, metody a události spojené s procesem drag-and-drop jsou definovány ve třídě TControl, která je předchůdcem všech vizuálních komponent Delphi. Proto jsou společné pro všechny komponenty.

Začátek tažení je určen vlastností DragMode, kterou lze nastavit v době návrhu nebo programově rovnou dmManual nebo dmAutomatic. Hodnota dmAutomatic (automaticky) určuje, zda se proces přetažení spustí automaticky, když uživatel klikne myší na komponentu. V tomto případě však událost OnMouseDown spojená s kliknutím uživatele na tlačítko myši pro tuto komponentu vůbec nenastane.

Rozhraní pro přenos a příjem komponent se objevilo již dávno. Umožňuje interakci dvou ovládacích prvků, když je aplikace spuštěna. V tomto případě lze provést všechny potřebné operace. Navzdory jednoduchosti implementace a stáří vývoje považuje mnoho programátorů (zejména začátečníků) tento mechanismus za obskurní a exotický. Použití Drag-and-Drop však může být velmi užitečné a snadno implementovatelné. Nyní se o tom přesvědčíme.

Aby mechanismus fungoval, musí být odpovídajícím způsobem nakonfigurovány dva ovládací prvky. Jeden by měl být Zdroj, druhý Cíl. V tomto případě se zdroj nikam neposouvá, ale je pouze jako takový registrován v mechanismu.

Věřte mi, že stačí jen konvertovat souřadnice X, Y předán v parametrech událostí OnDragOver a OnDragDrop na souřadnice formuláře.

Pracujte s vlastnostmi Vlevo a Nahoře součásti, nad kterou se pohybuje kurzor. Dovolte mi uvést jednoduchý příklad. Umístěte komponentu Memo na formulář a nastavte vlastnost Align na alTop. Umístěte panel na tvar, také nastavte vlastnost Align na alTop a nastavte vlastnost Height na malou hodnotu, řekněme 6 nebo 7 px. Nastavte DragMode na dmAutomatica a DragCursor na crVSplit. Umístěte další komponentu Memo a nastavte Align na alClient. Vyberte obě komponenty Memo současně, na panelu a vytvořte společnou obsluhu události pro událost OnDragOver, jak je znázorněno níže:

Nedávno jsem měl nápad začít vyvíjet hru pro Android. Pro začátek jsem se rozhodl psát šachy. Připadalo mi to jako technologie Drag and drop ideální pro implementaci mechanismu pro pohyb tvarů. Pro nezasvěcené podotýkám metoda drag and drop je ve schopnosti přetáhnout některé grafické objekty na jiné a po uvolnění provést akci. Nejjednodušší příklad- odstranění zástupce z plochy počítače přetažením do koše. Vhozením zkratky do odpadkového koše říkáme systému, že chceme tyto dva objekty donutit k interakci. Systém přijme náš signál a rozhodne, jakou akci podnikne. Drag and drop se rozšířilo díky své intuitivní srozumitelnosti. Tento přístup je podpořen našimi zkušenostmi s objekty v reálném světě a funguje skvěle ve virtuálním prostředí. Pokud jde o šachy, pomocí drag and drop je technologicky snazší určit buňku, kam uživatel přetáhl figurku, protože není potřeba počítat počet buněk ze souřadnic bodu dropu. Tuto práci převezme virtuální stroj.

Účel použití technologie Drag n Drop

Použití technologie drag and drop mi umožňuje vyřešit tři problémy s trochou krve:

1. Vizualizace kurzu. Když uživatel klepne na tvar a začne s ním pohybovat po obrazovce, tvar se nahradí menší kresbou. Uživatel tedy chápe, že postava je zachycena.
2. Omezil jsem oblast pohybu tvaru na velikost desky.
3. Pokud uživatel uvolní tvar na nesprávném místě, měl by se vrátit do původní polohy.

Úkoly jsou nastíněny, pojďme se pustit do jejich realizace.

Vyměňte ImageView na dotyk

Všechny mé tvary jsou objekty ImageView. Bohužel se ukázalo, že implementace Drag & Drop v Androidu neumožňuje „out of the box“ nahradit obrázek objektu při doteku. Tento úkol je však docela dobře řešitelný pomocí API. Musíme provést několik jednoduchých kroků:

1. Vytvořte objekt DragShadowBuilder.
2. Zavolejte metodu startDrag.
3. Skryjte náš ImageView, který zobrazuje tvar, voláním metody setVisibility s parametrem View.INVISIBLE. Výsledkem je, že na obrazovce zůstane pouze objekt DragShadowBuilder, který dá uživateli signál k uchopení tvaru.

Tyto akce musí být implementovány v obslužné rutině OnTouchListner ImageView. Za tímto účelem přepíšeme metodu onTouch:

@ Přepsat veřejné booleovské onTouch (zobrazení View, MotionEvent motionEvent) (if (motionEvent. GetAction () == MotionEvent. ACTION_DOWN) (ClipData clipData = ClipData. NewPlainText ("", ""); View. DragShadowBuilder dsb = nový pohled. DragShadowBuilder (view); view. startDrag (clipData, dsb, view, 0); view. setVisibility (View. INVISIBLE); return true;) else (return false;))

Vše je velmi jednoduché. Takže jsme přišli na náhradu obrázku, pojďme k dalšímu úkolu.

Omezení oblasti přetažení pro funkci přetažení

S omezením oblasti tažení je jeden problém. Jde o to, že pokud upustíte tvar mimo nástěnku, událost drop nenastane, protože uživatel upustil objekt od nuly a objekt nemá s čím interagovat. Díky tomu se figurka nevrátí do původního stavu a zůstane navždy skrytá. Strávil jsem spoustu času čtením dokumentace, ale stále jsem nenašel způsob, jak omezit oblast přetahování objektů. Inspirace přišla náhle. Nepotřebuji oblast vůbec omezovat, potřebuji vědět, zda uživatel uvolnil tvar správně nebo ne.

Určení správného uvolnění
Odpovědi na své otázky jsem našel v části „zpracování událostí přetažení“ na webu Android Developers. Zde je několik klíčových bodů:

1. Když uživatel dokončí přetahování, v obslužné rutině DragListeners se spustí událost ACTION_DRAG_ENDED.
2. V DragListener můžete získat podrobnější informace o operaci přetažení voláním metody DragEvent.getResult ().
3. Pokud DragListener vrátí hodnotu true v reakci na událost ACTION_DROP, volání getResult také vrátí hodnotu true, jinak false.

Potřebuji tedy zachytit událost ACTION_DRAG_ENDED a zavolat metodu getResult. Pokud vrátí hodnotu false, pak uživatel přetáhl tvar z desky a musím přepnout ImageView do viditelného režimu.

@ Přepsat veřejnou logickou hodnotu onDrag (Zobrazení zobrazení, DragEvent dragEvent) (int dragAction = dragEvent. GetAction (); View dragView = (View) dragEvent. GetLocalState (); if (dragAction == DragEvent. ACTION_DRAG_EXITED) (containsDragable = false;) else if (dragAction == DragEvent. ACTION_DRAG_ENTERED) (containsDragable = true;) else if (dragAction == DragEvent. ACTION_DRAG_ENDED) (if (dropEventNotHandled (dragEvent)) (dragView. setVisibility (View. VISIBLE);))) else if (dragEvent) = DragEvent. ACTION_DROP & amp; & amp; obsahujeDragable) (checkForValidMove ((ChessBoardSquareLayoutView) zobrazení, dragView); dragView. SetVisibility (View. VISIBLE);) return true;) private boolean dropEventNotHandled (DragEvent dragEvent) (návrat! DragR )

Nyní může uživatel pustit figurku kdekoli a nic hrozného se nestane.

Stanovení povolených pohybů

Poslední část článku je věnována kontrole platnosti tahu, který se uživatel pokouší provést. Než začnu podrobně diskutovat o tomto tématu, udělám malou poznámku vysvětlující strukturu mé aplikace. Šachovnice je reprezentována jako TableLayout a každá buňka je potomkem LinearLayout a má OnDragListener.

Každý OnDragListener navíc odkazuje na objekt prostředníka, který se stará o interakci herních objektů a pamatuje si polohu aktuální buňky.

Když uživatel přetáhne kus přes klec, jsou možné následující akce:

1. Pomocí události ACTION_DRAG_ENTERED nastavte proměnnou ‚containsDraggable‘ na hodnotu true.
2. Pomocí události ACTION_DRAG_EXITED nastavte proměnnou ‚containsDraggable‘ na hodnotu false.
3. Pomocí události ACTION_DROP se zeptejte makléře, zda je povoleno umístit figurku do této buňky.

Níže je kód, který implementuje popsanou logiku

@ Přepsat veřejnou logickou hodnotu onDrag (Zobrazení zobrazení, DragEvent dragEvent) (int dragAction = dragEvent. GetAction (); View dragView = (View) dragEvent. GetLocalState (); if (dragAction == DragEvent. ACTION_DRAG_EXITED) (containsDragable = false;) else if (dragAction == DragEvent. ACTION_DRAG_ENTERED) (containsDragable = true;) else if (dragAction == DragEvent. ACTION_DRAG_ENDED) (if (dropEventNotHandled (dragEvent)) (dragView. setVisibility (View. VISIBLE);))) else if (dragEvent) = DragEvent. ACTION_DROP & amp; & amp; obsahujeDragable) (checkForValidMove ((ChessBoardSquareLayoutView) zobrazení, dragView); dragView. SetVisibility (View. VISIBLE);) return true;)

Jak vidíte, bez ohledu na to, zda je přesun legální nebo ne, je ImageView nastaven do viditelného stavu. Chtěl jsem, aby uživatel viděl pohyb tvaru. Již dříve jsem zmínil, že buňka je potomkem LayoutView. To se provádí, aby bylo snazší přesunout ImageView z buňky do buňky. Níže je uveden kód pro metodu checkForValidMove, která ukazuje, jak se ImageView pohybuje.

private void checkForValidMove (ChessBoardSquareLayoutView view, View dragView) (if (mediátor. isValidMove (view)) (ViewGroup owner = (ViewGroup) dragView. getParent (); vlastník. removeView (dragView); view. addView (dragView); view. setGravity (Gravitace. CENTER); zobrazení. ShowAsLanded (); prostředník. HandleMove (zobrazení);))

Doufám, že vám tento článek pomůže při vývoji vašich vlastních projektů.