Drag-and-drop: způsob manipulace s prvky uživatelského rozhraní. Obecné otázky a teorie technologie Drag and Drop Jak se provádí drag and drop
Nedávno jsem měl nápad začít vyvíjet hru pro Android. Pro začátek jsem se rozhodl psát šachy. Zdálo se mi, že technologie Drag and Drop by byla perfektní pro implementaci mechanismu pro pohyb figurek. Pro nezasvěcené podotýkám, že metoda drag and drop je možnost přetáhnout jeden grafický objekt na druhý a po jeho uvolnění provést tu či onu akci. Nejjednodušším příkladem je odstranění zástupce z plochy počítače přetažením do koše. „Vyhozením“ štítku do koše říkáme systému, že chceme přinutit tyto dva objekty k interakci. Systém přijme náš signál a rozhodne, jakou akci má provést. Drag and drop se rozšířilo díky své intuitivní srozumitelnosti. Tento přístup je podpořen našimi zkušenostmi s interakcí 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 figurku přetáhl, protože není potřeba počítat číslo buňky ze souřadnic bodu uvolnění. Tuto práci převezme virtuální stroj.
Použití technologie drag and drop mi umožňuje vyřešit tři problémy s malým úsilím:
Úkoly byly identifikovány, začněme je realizovat.
Náhrada ImageView na dotykVšechny mé tvary jsou objekty ImageView. Bohužel se ukázalo, že implementace Drag & Drop v Androidu neumožňuje „přímo z krabice“ nahradit obrázek objektu, když se ho dotknete. Tento úkol však lze zcela vyřešit pomocí API. Budeme muset provést několik jednoduchých kroků:
Tyto akce musí být implementovány v obslužné rutině OnTouchListner objektu ImageView. Chcete-li to provést, přepišme metodu onTouch:
@ Override public boolean onTouch(View view, MotionEvent motionEvent) ( if (motionEvent. getAction() == MotionEvent. ACTION_DOWN) ( ClipData clipData= ClipData. newPlainText("" , "" ) ; View. DragShadowBuilder dsb= new View. DragShad (zobrazení) ;Vše je velmi jednoduché. Takže jsme vyřešili substituci obrázků, pojďme k dalšímu úkolu.
Omezení oblasti přetažení pro funkci přetaženíVyskytl se problém s omezením oblasti tažení. Jde o to, že pokud uvolníte figurku mimo hrací desku, událost drop nenastane, protože uživatel pustil předmět do prázdného prostoru a předmět nemá nic, s čím by mohl interagovat. Díky tomu se figurka nevrátí do původního stavu a zůstane navždy skryta. Strávil jsem spoustu času čtením dokumentace, ale stále jsem nemohl najít způsob, jak omezit oblast přetahování objektů. Poznání přišlo náhle. Nepotřebuji vůbec omezovat plochu, potřebuji vědět, zda uživatel pustil 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í konce přetažení“ na webu Android Developers. Zde je několik klíčových bodů:
Potřebuji tedy zachytit událost ACTION_DRAG_ENDED a zavolat metodu getResult. Pokud vrátí hodnotu false, pak uživatel přetáhl kus z hrací plochy a musím nastavit ImageView do viditelného režimu.
@ Override public boolean onDrag(View view, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; View dragView= (View) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) (obsahujeDragable= false ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( obsahujeDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE) if ( ) ) else = DragEvent. ACTION_DROP& amp;& amp; obsahujeDragable) ( checkForValidMove((ChessBoardSquareLayoutView) zobrazení, dragView) ; dragView. setVisibility(View. VISIBLE) ; ) return true ) private boolean dropEventNotHandled (DragEvent) dragEvent; )Nyní může uživatel pustit figurku kdekoli a nic špatného se nestane.
Definice platných tahůPoslední část článku je věnována kontrole platnosti tahu, který se uživatel pokouší provést. Než toto téma podrobně proberu, učiním krátkou 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 buňku, jsou možné následující akce:
Níže je kód, který implementuje popsanou logiku
@ Override public boolean onDrag(View view, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; View dragView= (View) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) (obsahujeDragable= false ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( obsahujeDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE) if ( ) ) else = 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 platný nebo ne, ImageView se přenese 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() ; owner. removeView(dragView) ; view. addView(dragView) ; view. setGravity (Gravitace. STŘED) ;Doufám, že vám tento článek pomůže při vývoji vašich vlastních projektů.
182
V tomto příkladu vybereme prvek div a učiníme jej pohyblivým voláním metody draggable() na něm. Jak je znázorněno na obrázku níže, prvek v otevřeném dokumentu zaujme svou obvyklou pozici, ale poté jej lze přesunout pomocí ukazatele myši na libovolné místo v okně prohlížeče:
Schopnost přetahovat prvky je užitečná sama o sobě, ale ještě užitečnější je při použití ve spojení s interakcí s možností přetažení, která je popsána dále.
Přetahovatelné interakce je dosaženo výhradně použitím 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 schopny pracovat s podobnými nativními funkcemi přetahování operačních systémů.
Operace drag-and-drop definované specifikací HTML5 jsou obvykle implementovány pomocí nativních mechanismů operačního systému. Pokud používáte jQuery UI mechanismus Drag-and-drop, pak je lepší zakázat ekvivalentní funkce HTML5, abyste předešli konfliktům. Chcete-li to provést, nastavte atribut draggable prvku tělo dokumentu na hodnotu false.
Nastavení interakce s možností přetaženíExistuje mnoho možností přizpůsobení pro interakce 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:
| osa | Omezuje schopnost pohybu v určitých směrech. Výchozí hodnota je false, což znamená žádné omezení, ale můžete také zadat hodnotu „x“ (pohyb pouze podél osy X) nebo „y“ (pohyb pouze podél osy Y). |
| zadržování | Omezuje umístění prvku přesouvaného do určité oblasti obrazovky. Typy podporovaných hodnot jsou popsány v tabulce níže s použitím 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 | Definuje vzdálenost, o kterou musí uživatel přetáhnout prvek z jeho počáteční 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 |
Existuje několik způsobů, jak můžete omezit pohyb prvku do určitých směrů. První je použít volbu osy, která umožňuje omezit směr pohybu na osu X nebo Y. Příklad je uveden níže:
... div.dragElement (velikost písma: velké; ohraničení: tenké plné černé; odsazení: 16px; šířka: 8 em; zarovnání textu: na střed; barva pozadí: světlešedá; okraj: 4px ) $(funkce() ( $ (".dragElement").draggable(( osa: "x")).filter("#dragV").draggable("volba", "osa", "y" )); Přetáhněte svisle Přetáhněte vodorovně Spustit příklad
V tomto příkladu definujeme dva prvky div, vybereme je pomocí jQuery a zavoláme metodu draggable(). Jako argument této metodě předáme objekt, který zpočátku omezuje pohyb obou prvků div ve směru podél osy X. Potom pomocí metody jQuery filter() jsme schopni vybrat prvek dragV, aniž by jQuery prohledával. celý dokument znovu a nastavte jej na jiný povolený směr pohybu - podél osy Y. Získáme tak dokument, ve kterém lze jeden prvek div táhnout pouze ve vertikálním směru a druhý - pouze v horizontálním směru. Výsledek je znázorněn na obrázku:
Můžete také omezit oblast obrazovky, kam můžete přetáhnout položku. Chcete-li to provést, použijte možnost uzavření. 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í:
... div.dragElement (velikost písma: velké; okraj: tenký plný černý; odsazení: 16px; šířka: 8 em; zarovnání textu: na střed; barva pozadí: světlešedá; okraj: 4px ) #container ( okraj: střední dvojitý černá; šířka: 700px; výška: 450px) $(funkce() ( $(".dragElement").draggable(( containment: "parent" )).filter("#dragH").draggable("volba", "" osa", "x"); )); Přetáhněte vodorovně Přetáhněte uvnitř nadřazeného příkladu spuštění
V tomto příkladu mají oba prvky omezenou schopnost pohybu, takže je lze přetahovat pouze v rámci svého nadřazeného prvku, což je prvek div s pevnou velikostí. Jedno z plovoucích prvků div má další omezení spočívající v plovoucím použití pomocí možnosti osy, a to v tom smyslu, že se může pohybovat pouze vodorovně v rámci svého rodiče. Výsledek je znázorněn na obrázku:
Možnost mřížky umožňuje nastavit vazbu přesouvaného prvku na buňky mřížky. Tato volba bere jako hodnotu pole dvou prvků určujících šířku a výšku buněk mřížky v pixelech. Níže je uveden příklad použití možnosti mřížky:
... #draggable (velikost písma: x-large; okraj: tenký plný černý; šířka: 5 em; zarovnání textu: na střed; padding: 10px) $(function() ( $("#draggable").draggable( ( mřížka: )); Drag me Run příklad
Tento příklad určuje mřížku s buňkami o šířce 100 pixelů a výšce 50 pixelů. Když prvek přetáhnete, „skočí“ z jedné (neviditelné) buňky do druhé. Efekt přichycení je skvělým příkladem toho, jak lze použít funkci interakce, ale je obtížné jej sdělit 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 , prvek se při vodorovném pohybu přichytí k buňkám mřížky o šířce 100 pixelů, ale bude se pohybovat volně svisle.
Zpoždění přesunuExistují dvě možnosti, které vám umožní zpozdit přetažení pohybujícího se prvku. Možnost zpoždění umožňuje určit dobu v milisekundách, po kterou musí uživatel táhnout ukazatel myši, 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í:
... #time, #distance (velikost písma: velké; ohraničení: tenké plné černé; odsazení: 10px; šířka: 120px; zarovnání textu: na střed; barva pozadí: světlešedá; okraj: 4px; ) $(funkce( ) ( $("#čas").draggable(( zpoždění: 1000 )) $("#vzdálenost").draggable(( vzdálenost: 150 )) )); Blok s časovým zpožděním Blok s minimální vzdáleností Příklad spuštění
V tomto příkladu jsou dva pohyblivé prvky, z nichž jeden je zpožděn pomocí možnosti zpoždění a druhý je zpožděn 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í této periody 1000 ms. V tuto chvíli není nutné hýbat myší, ale po celou dobu prodlevy musí zůstat tlačítko myši stisknuté, poté lze prvek pohybovat pohybem myši. Po uplynutí doby prodlevy se přesouvaný prvek 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, o kterých jsme hovořili dříve.
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ý prvek pak přeskočí na aktuální umístění ukazatele.
Pokud použijete obě nastavení na stejný prvek, přesunutý prvek se nepohne, dokud nebudou splněna obě kritéria zpoždění, tj. dokud pokus o přetažení prvku netrvá po stanovenou dobu a dokud se ukazatel myši nepohne o zadaný počet pixelů.
Použití přetahovacích interakčních metodVšechny metody definované pro interakci Draggable jsou součástí sady základních metod, které jste již viděli při pohledu na widgety. Neexistují žádné metody specifické pro interakci Draggable, 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íInteraction Draggable podporuje jednoduchou sadu událostí, které vás upozorní, když je prvek přetažen. Tyto události jsou popsány v tabulce níže:
Stejně jako u událostí widgetu lze na tyto události také reagovat. Níže je uveden příklad zpracování událostí spuštění a zastavení:
... #draggable (velikost písma: x-large; okraj: tenký plný černý; šířka: 190px; zarovnání textu: na střed; padding:10px) $(function() ( $("#draggable").draggable( ( start: function() ( $("#přetáhnout").text("Přetáhněte mě..."), stop: function() ( $("#přetáhnout").text("Přetáhněte mě") ) )) )); Drag me Run 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 výhoda 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 přetahovatelného prvku, i když se pohybuje po obrazovce.
Použití droppable interakceSamotné přetažení prvku může v některých situacích stačit, ale nejužitečnější je při použití ve spojení s interakcí Droppable.
Prvky, na které byla aplikována interakce Droppable (přijímající prvky), získávají schopnost přijímat pohyblivé prvky vytvořené pomocí interakce Draggable.
Přijímací prvky se vytvářejí pomocí metody droppable(), 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:
| vytvořit | Vyskytuje se, když je na prvek aplikována interakce s možností přetažení |
| aktivovat | Nastane, když uživatel začne táhnout přesouvaný prvek |
| deaktivovat | Nastane, když uživatel přestane táhnout přesouvaný prvek |
| přes | Vyskytuje se, když uživatel přetáhne plovoucí prvek přes přijímající prvek (za předpokladu, že tlačítko myši ještě nebylo uvolněno) |
| ven | Vyskytuje se, když uživatel přetáhne přesouvaný prvek mimo přijímající prvek |
| pokles | Nastane, když uživatel opustí přemisťovaný prvek na přijímajícím prvku |
Níže je uveden příklad vytvoření jednoduchého přijímacího prvku, pro který je definována obsluha události jediné drop:
... #draggable, #droppable (velikost písma: velké; okraj: tenký plný černý; odsazení: 10px; šířka: 100px; zarovnání textu: na střed; barva pozadí: světlešedá; okraj: 4px;) #dropable (odsazení : 20px; pozice: absolutní: 5px;) $(funkce() ( $("#tažitelný").draggable(); $("#droppable").droppable(( drop: function() ( $(" #draggable").text("Left") ) )); )); Nechte mě zde Drag me Run příklad
Tento příklad přidá prvek div do dokumentu, jehož textový obsah je reprezentován řetězcem "Leave here." 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 přesouvaného prvku pomocí metody text().
Interakce Drag-and-drop vytvořená v tomto příkladu je jednoduchá, ale poskytuje užitečný kontext pro vysvětlení, jak interakce Draggable a Droppable spolupracují. Různé fáze procesu přetahování prvků jsou znázorněny na obrázku:
Všechno to vypadá velmi jednoduše. Přesouvaný prvek táhneme, dokud není nad přijímajícím prvkem, a uvolníme jej. Prvek, který byl odstraněn, zůstane tam, kde byl ponechán, a jeho textový obsah se změní v reakci na událost drop. Následující části ukazují, jak používat další události interakce s možností droppable ke zlepšení uživatelského dojmu.
Osvětlení objektu přijímajícího cílPomocí událostí aktivace a deaktivace můžete zvýraznit cílový přijímající objekt, když uživatel zahájí proces přetažení prvku. V mnoha situacích je tato myšlenka velmi plodná, protože poskytuje uživateli spolehlivý návod, které prvky jsou součástí modelu drag-and-drop. Odpovídající příklad je uveden níže:
... $(funkce() ( $("#přetáhnout").přetáhnout(); $("#zahodit").droppable(( upustit: funkce() ( $("#přetáhnout").text("Vlevo ") ), activate: function() ( $("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen" )); ), deactivate: function() ( $("#droppable") ").css("hranice", "").css("barva-pozadi", ""); ) )); )); ...Uveďte 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 handleru použije metodu css() ke změně vlastností CSS border a background-color tohoto prvku. V důsledku toho je cílový přijímací prvek zvýrazněn, což uživateli signalizuje, že existuje spojení mezi ním a přesouvaným prvkem.
Událost deactivate se používá k odstranění hodnot vlastností CSS z přijímajícího prvku a jeho vrácení 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í, bez ohledu na to, zda je tažený prvek ponechán na přijímajícím prvku nebo ne.) Tento proces je znázorněn na obrázku:
Technologie drag-and-drop může být vylepšena přidáním přepínání a vypínání událostí. Událost over nastane, když je 50 % přesouvaného prvku nad jakoukoli částí přijímající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:
$(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#draggable").text("Left") ) , activate: function() ( $("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen" )); ), deactivate: 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ž přijímací prvek překrývá alespoň 50 % přesouvaného prvku, je uzavřen v rámci a jeho barva pozadí se změní, jak je znázorněno na obrázku:
Tato 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 ukázáno později.
Nastavení droppable interakcíInterakce Droppable má řadu vlastností, které můžete změnit a přizpůsobit tak její chování. Tyto vlastnosti jsou uvedeny v tabulce níže:
| 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 |
| akceptovat | Zúží sadu pohyblivých prvků, na které bude přijímací prvek reagovat. Výchozí hodnota je *, která odpovídá libovolnému prvku |
| aktivní třída | Definuje třídu, která bude přiřazena v reakci na událost activate a odstraněna v reakci na událost deactivate |
| hoverClass | Definuje třídu, která bude přiřazena v reakci na událost over a odstraněna v reakci na událost out |
| tolerance | Definuje minimální stupeň překrytí, při kterém dojde k překrytí |
Pomocí možnosti přijmout můžete omezit sadu rozbalitelných prvků, které budou přijaty prvkem s funkcí interoperability s možností zahození. Hodnota možnosti 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 přesouvaný prvek odpovídá zadanému selektoru. Odpovídající příklad je uveden níže:
... .draggable, #droppable (velikost písma: velké; okraj: tenký plný černý; odsazení: 10px; šířka: 100px; zarovnání textu: na střed; barva pozadí: světlešedá; okraj: 4px;) #droppable (odsazení : 20px; pozice: absolutně ui.draggable.text("Left") ), activate: function() ( $("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen" )); ), deactivate: function () ( $("#droppable").css("border", "").css("background-color", ""); ), přijmout: "#drag1" )); Nechte zde Prvek 1 Prvek 2 Příklad spuštění
V tomto příkladu jsou dva přetahovatelné prvky s ID drag1 a drag2. Při vytváření přijímacího prvku používáme volbu accept, pomocí které označujeme, že přijatelným prvkem pro přesun bude pouze prvek drag1.
Když přetáhnete prvek drag1, uvidíte stejný efekt jako v předchozích příkladech. Ve vhodných časech budou pro přijímající prvek spuštěny události aktivace, deaktivace, přepnutí a vypnutí. Pokud zároveň přetáhnete prvek drag2, který neodpovídá selektoru zadané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, jakým vybíráme přijatelný plovoucí prvek, na kterém se má volat metoda text(). Když byl v dokumentu pouze jeden pohyblivý prvek, stačil k tomu atribut id:
Drop: function() ( $("#draggable").text("Left") ),
V tomto příkladu jsou dva plovoucí prvky a výběr podle atributu id nepřinese požadovaný výsledek, protože text se v tomto případě vždy změní ve stejném plovoucím prvku, bez ohledu na to, který je pro přijímající prvek přijatelný.
Řešením je použít objekt ui, který uživatelské rozhraní jQuery poskytuje jako další argument pro každou obsluhu události. Vlastnost draggable objektu uživatelského rozhraní vrací objekt jQuery obsahující prvek, který uživatel přetáhne nebo se pokusí pustit na cílový prvek, což umožňuje vybrat požadovaný prvek takto:
Drop: function(event, ui) ( ui.draggable.text("Left") ),
Změna prahu překrytíVe výchozím nastavení k události over dojde pouze tehdy, když alespoň 50 % přesouvaného prvku překrývá přijímající prvek. Velikost tohoto překrytí prahu lze změnit pomocí možnosti tolerance, která může nabývat hodnot uvedených v tabulce níže:
Dvě hodnoty, které používám nejčastěji, jsou fit a touch, protože uživatelům dávají největší smysl. Přizpůsobit používám, když tažený prvek musí zůstat v oblasti přijímacího prvku, do kterého byl přesunut, a dotyk, když se tažený prvek potřebuje 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 clone říká uživatelskému rozhraní jQuery, aby vytvořilo kopii přesouvaného prvku spolu s celým jeho obsahem a použilo výsledný výsledek jako pomocný prvek. Výsledek je znázorněn na obrázku:
Pomocný prvek se odstraní, když uživatel uvolní tlačítko myši nad přesouvaným prvkem, přičemž posouvaný prvek a přijímající prvek zůstanou v původní poloze.
Jak je znázorněno na obrázku, původní prvek, který se pohybuje, zůstává na místě a pouze pomocný prvek se pohybuje po obrazovce podle ukazatele myši. Pokud je velikost přesouvaného prvku velká, jako v našem příkladu, pak pokrývá zbytek prvků dokumentu, takže pro uživatele bude obtížné i 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"/>") ) )); $("#basket").droppable(( activeClass: "aktivní", hoverClass: "hover" )); )); ...Uveďte příklad
Když uživatel začne přetahovat prvek, uživatelské rozhraní jQuery zavolá funkci určenou parametrem helper a použije vrácený prvek jako objekt, který se má přetáhnout. 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 proxy pro přesouvaný prvek, takže je mnohem snazší sledovat ostatní prvky v dokumentu.
Objekt uživatelského rozhraní, který uživatelské rozhraní jQuery předává událostem 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"/>") ) )); $("#basket").droppable(( activeClass: "aktivní", hoverClass: "hover", over: function(event, ui) ( ui.helper.css("border", "silná pevná látka #27e6ed") ) , out: function(event, ui) ( ui.helper.css("hranice", "") ) )); )); ...
Zde se události over a out a vlastnost ui.helper používají k zobrazení ohraničení kolem pomocného prvku, když se překrývá s přijímajícím prvkem. Výsledek je znázorněn na obrázku:
Pomocí možnosti uchopení můžete zajistit, aby byl přesouvaný prvek „přitahován“ k okrajům prvků, vedle kterých prochází. Tato možnost přijímá jako hodnotu selektor. Přesouvaný 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í:
Spusťte příklad uživatelského rozhraní jQuery #snapper, .draggable, .droppable (velikost písma: velké; okraj: středně plná černá; odsazení: 4px; šířka: 150px; zarovnání textu: na střed; barva pozadí: světlešedá; okraj-dolní: 10px ;).dropable (okraj-pravý: 5px; výška: 50px; šířka: 120px) #dropContainer (pozice: absolutní; pravá: 5px;) div span (pozice: relativní; nahoře: 25%) .droppable.active (ohraničení: středně plná zelená) .droppable.hover (barva pozadí: světle zelená) #snapper (pozice: absolutní; vlevo: 35 %; okraj: středně plná černá; šířka: 180px; výška: 50px) $(funkce() ( $(" div.draggable").draggable(( snap: "#snapper, .droppable", snapMode: "oba", snapTolerance: 50 )); $("#basket").droppable(( activeClass: "aktivní", hoverClass: "vznášet se" )); Košík Snap sem Přetáhněte mě
Když se pohyblivý prvek přiblíží k jednomu z vhodných prvků, je k němu jakoby „přitahován“ tak, že se jejich sousední hrany dotýkají. Pro takovou vazbu můžete vybrat jakýkoli prvek, nejen přijímající prvek. V tomto příkladu jsem přidal prvek div a nastavil možnost uchopení na hodnotu, která vybere tento prvek i přijímající prvek v dokumentu.
Existuje několik pomocných možností, které vám umožní přesněji přizpůsobit chování ukotvení prvků. Jednou z nich je možnost snapMode. S jeho pomocí můžete určit typ vazby. Jsou povoleny následující hodnoty: vnitřní(přichytit 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í).
Volba snapTolerance umožňuje určit, jak daleko se musí plovoucí prvek přiblížit k okraji cílového prvku, než dojde k uchopení. Výchozí hodnota je 20, což znamená 20 pixelů. V příkladu je použita hodnota 50, která odpovídá uchopení na větší vzdálenost. Je velmi důležité zvolit správnou hodnotu pro tuto možnost. Pokud je hodnota snapTolerance příliš nízká, uživatel si nemusí všimnout efektu uchopení, a pokud je příliš vysoká, přesouvaný prvek začne dělat neočekávané skoky a přichytávat se ke vzdáleným prvkům.
Využití technologie drag and drop(drag and drop) umožňuje uživateli přesouvat různé objekty z jednoho do druhého, například prvky jednoho seznamu do druhého. K tomu je potřeba použít dva ovládací prvky: dřez a zdroj. Přijímač je objekt, který přijme zdrojový objekt (přesouvaný objekt).
Události, ke kterým dochází při pohybu objektů, jsou uvedeny níže v pořadí, v jakém k nim dochází.
OnStartDrag(typ TStartDragEvent) - na začátku operace, generované zdrojovým objektem. Parametry, které jsou předány obsluze události: objekt příjemce DragObject (typ TDragObject), zdrojový objekt (typ TObject).
OnDragOver(typ TDragOverEvent) - vytvoří objekt příjemce, když je nad ním přetažený objekt. Parametry, které se předávají obsluze události: objekt příjemce Sender (typ TObject), zdrojový objekt Source (typ TObject), stav pohybu State (typ TDragState), X a Y (typ integer) - aktuální souřadnice ukazatele myši, Accept ( type boolean ) znamení potvrzení operace přesunu. Stav pohybu jasně ukazuje, zda se pohybovaný objekt nachází v oblasti přijímače, pohybuje se v ní nebo ji opustil. Předané parametry umožňují cílovému objektu přijmout nebo odmítnout zdrojový objekt. Parametr Accept je nastaven na Trye, pokud je operace přesunu přijata, jinak je nastavena na False.
onDragDrop (typ TDragDropEvent) - generuje objekt příjemce, když je na něj upuštěn tažený objekt. Obsluze události jsou předány aktuální souřadnice ukazatele myši, objekt příjemce odesílatele (typ TObject) a původní pohybový objekt Source (typ TObject).
onEndDrag (typ EndDragEvent) – Vyvolá se po dokončení operace přetažení. Souřadnice X a Y bodu, kde jsou zdrojový objekt odesílatele a cílový objekt příjemce předány obsluze události.
Pro vytvoření drag and drop stačí implementovat dvě události: OnDragDrop a OnDragOver s vlastností DragMode nastavenou na dmAutomatic. V opačném případě musí být začátek operace přetažení, metoda BeginDrag, zakódována programátorem.
Pro konsolidaci materiálu vytvoříme následující aplikaci. Umístěte komponentu Panel na formulář. Nastavte vlastnost DragMode objektu Object Inspector na dmAutomatic. Vyberme objekt formuláře a pomocí Object Inspectoru vytvořte následující události:
Procedure TForm1.FormDragOver(Sender, Source: TObject; X, Y: Integer; State: TDragState; var Accept: Boolean); begin if Source = Panel1 then Accept:= True else Accept:= False; konec; procedure TForm1.FormDragDrop(Sender, Source: TObject; X, Y: Integer); begin Panel1.Left:= X; Panel1.Nahoře:= Y; konec;
Nyní spuštěním aplikace a kliknutím na tlačítko myši nad panelem můžeme posouvat objekt panelu po celém formuláři.
Výsledek: seznámili jsme se s technologií drag and drop(drag and drop) a využili v praxi.
Když už mluvíme o grafickém uživatelském rozhraní, nelze nezmínit technologii Drag and Drop (doslova: Táhni a házej).
Tato technologie je založena na přetahování prvků grafického rozhraní ze zdroje do cíle. Rozhraní je přístupné pouze pomocí myši (touchpad, trackball) nebo dotykové obrazovky.
Prvek dostupný pro přetažení se uchopí a přidrží myší a současně jej přetáhne na jiné místo. Když je myš ve správné poloze, tlačítko myši se uvolní a objekt se uvolní.
Měli byste však odlišit rozhraní Drag’n Drop od ovládacích prvků rozhraní, které mají ve svých metodách metody zodpovědné za pohyb implementované stejným způsobem. Okno (formulář) lze například přesouvat po obrazovce (přetažením za záhlaví). ScrollBox má posuvný posuvník. Ale v obou příkladech je přetažení interní (pro komponentu) akcí (událostí) a žádným způsobem neovlivňuje ostatní systémové objekty.
Rozhraní Drag and Drop je použitelné pouze pro přesun objektu z kontejneru do kontejneru, i když jsou kontejnery heterogenní. Například přetažením souboru ze složky do e-mailu.
Drag and Drop rozhraní ve webových technologiíchPoužití Drag and Drop rozhraní ve webových technologiích bylo průlomem v . Existují offline editory Drag and Drop (například DreamWeaver) a online (například jakýkoli moderní tvůrce webových stránek.
Je jednodušší něco vzít a odložit, než psát, co je potřeba vzít a kam to dát. Bez myši nebo podobného zařízení samozřejmě nemůžete nic vybírat ani nic specifikovat, ale i za současného stavu věcí je použití myšlenky „drag and drop“ velmi přirozené a pohodlné.
Náplní nápadu jsou nejen internetové obchody, elektronické knihovny, vyhledávací či informační systémy, ale i aplikovaná sféra. Myšlenka je velmi použitelná při vývoji webových stránek a jejich prvků, vytvářených a udržovaných interaktivně, bez účasti programátora.
Popis myšlenkyVyberte, přesuňte a umístěte - nápad je přirozený a pohodlný. Je prostě překvapivé, ž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ž spustíte přenos dokumentu na server.
Pro vývojáře je myšlenkou „drag and drop“ manipulovat s prvky stránky bez ručního přepočítávání souřadnic a velikostí značek, možnost vybrat více prvků a zarovnat je a také posouvat strany značek bloků.
HTML a CSS jsou vynikající jazyky pro popis značek a jejich stylování, 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 doslova zní jako „drag and drop“. V praxi to zní a funguje lépe: vybrané, přenesené a uvolněné - jednoduché a přirozené.
Je velmi jednoduché implementovat přenos souborů na stránce 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). Při 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 „kopírování“ a vytvořil kolem ní obrysy přesouvaných souborů.
Když byla myš nad košíkem, návštěvník uvolnil levé tlačítko myši, došlo k události „drag and drop“ a na stránce webu (spodní obrázek) byl kód JavaScript schopen přijmout a zpracovat všechny soubory, které návštěvník poskytl na stránku (web).
Kód, který tento postup provádí, je velmi jednoduchý. Dokonce i začínající vývojář to může zopakovat v jakýchkoli případech použití.
Uživatelské rozhraní je zde reprezentováno dvěma tagy: scPlaceFile (toto je samotný koš, 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 do košíku přiřazen obslužný program události „ondrop“ – vložit, ostatní události jsou blokovány a nepoužívají se.
Stránka funguje jako obvykle, ale jakmile si návštěvník vybere soubor (soubory) a přetáhne je do obrázku košíku, tedy do tagu scPlaceFile, spustí se zpracování události „soubory dorazily“.
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 vygeneruje seznam přijatých souborů.
Po zpracování je událost zablokována a není šířena. To je nezbytné, aby se prohlížeč nezabýval amatérskými aktivitami a nezasahoval do zpracování přijatých informací.
DnD a externí dataNahrávání obrázků na server pomocí drag and drop je běžnou praxí při používání této technologie. Vývojář obvykle vytvoří formulář pro nahrání souboru (1), který funguje jako obvykle (2). Návštěvník si může vybrat soubory a stáhnout je jako obvykle.
Pokud však návštěvník přetáhne a upustí konkrétní místo ve formuláři, pole pro název souboru (souborů) se vyplní automaticky.
To je dobré rozhodnutí. Je samozřejmě velmi těžké přiznat, že na počítači není myš. Je ale lepší vyvinout uživatelské rozhraní v obvyklé verzi a v implementaci DnD.
DnD a interní dataPéče o zájmy návštěvníka je vždy důležitá, ale důležité jsou i obavy 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 velikosti neustále vyvstává. Ruční výpočet je dobrou praxí, ale interaktivní možnost je pohodlnější. Všechny značky mají vždy obdélníkový tvar 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í myší – zapamatování souřadnic místa kliknutí, například jedné ze stran prvku. Pohyb myši - 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.
Formálně to není „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ýsledek, urychlit vývoj a zjednodušit 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ář). Požadavek na kompatibilitu mezi prohlížeči je zcela přirozený a moderní.
To vše dohromady ztěžuje tvorbu stránek, ale uplatněním myšlenky „drag and drop“ v její standardní podobě, pomocí jejích událostí, kombinací této myšlenky s běžnými událostmi na prvcích, je možné implementovat mechanismus v která stránka se vytvoří vizuálně.
Nyní se podívejme na výběr prvku nebo prvků. 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 znamená, že cíle je dosaženo rychleji. Kromě toho můžete vytvořit stránku v jednom prohlížeči a uložit pozici a velikost prvků. Otevřením této stránky na vašem smartphonu můžete opravit souřadnice a rozměry a zapamatovat si je pro konkrétní model smartphonu nebo verzi prohlížeče.
Stejná stránka, aniž by ručně splnila požadavek na různé prohlížeče, bude mít na různých zařízeních a v různých prohlížečích zobrazena různá data.
Tím, že návštěvník může tyto postupy provádět samostatně, a také si vybrat potřebné prvky stránky z těch, které poskytuje vývojář, je možné zajistit kompatibilitu napříč prohlížeči a požadovanou funkčnost stránky s přihlédnutím k názoru uživatele.
