Vytvoření jednoduchého rozhraní HTML5 „drag & drop“. Drag-and-drop: způsob ovládání prvků uživatelského rozhraní 13 drag and drop technologie

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 funkce bude fungovat téměř v jakémkoli prohlížeči, ale prvky, které jsou jí obdařeny, nebudou schopny pracovat s podobnými nativními nástroji přetahování a přetahování. operační systémy.

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:

Vlastnosti interakcí s možností přetažení Popis nemovitosti

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

Omezení směrů pohybu

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. Poté 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:

Omezení povolené oblasti pohybu prvků

Můžete také omezit oblast obrazovky, kam můžete přetáhnout položku. Chcete-li to provést, použijte možnost omezení. 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) $(function() ( $(".dragElement").draggable(( containment: "parent" )).filter("#dragH").draggable("option", " 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:

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

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řesunu

Existují 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 metod

Vš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: 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 interakce

Samotné přetažení prvku může v některých situacích stačit, ale nejužitečnější je, když se použije 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:

Události interakcí, které lze zahodit Popis události

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í; vpravo: 5px;) $(funkce() ( $("#přetahovatelné").draggable(); $("#rozkládací").droppable(( drop: funkce() ( $(" #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íl

Pomocí 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:

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

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:

Vlastnosti interakce s možností zahození Popis nemovitosti

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í

Omezení povoleného přesunu prvků

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í ( 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 prvky, které mají být přesunuty, a výběr podle atributu id nedá kýžený 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ý z nich 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:

Přichytit k okrajům prvku

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í. 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í ve větší vzdálenosti. 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.

Techniky drag and drop se vyvíjely mnoho let. Není žádným překvapením, že s rostoucím počtem programátorů vyvíjejících open-source pluginy zdrojový kód(například pro jQuery) jsou znovu oživeny staré metody. Knihovna JavaScript je vysoce citlivá a nabízí mnoho vylepšení v této éře webových technologií.

V tomto tutoriálu vytvoříme skript, který můžete použít k vytvoření dynamických obdélníků drag and drop na vašem webu. Proces je řízen jQuery. Takové skripty šetří čas tím, že poskytují hotové funkce! A drag-and-drop knihovnu lze použít v jiných projektech.

Příprava obsahu

Nejprve si k projektu připravme malý web. Ve složce projektu musíte vytvořit dva adresáře s pozoruhodnými názvy "js" a "css" a prázdný soubor index.html. Kód bude velmi jednoduchý, aby byla jasná představa o práci a byl zde bod pro další vývoj.

Níže je kód pro náš HTML soubor. V kapitole hlava zahrnujeme 3 skripty. Hlavní skript jQuery bude načten ze serveru Google Code. součástí je také náš soubor stylu style.css, který obsahuje hlavní vlastnosti pro tvarování vzhled náš dokument.

Přetáhněte mě Ano, ano. Přesně já. Můžete mě také přetáhnout ( zIndex: 200, neprůhlednost: 0,9 )

P.S.: Můžete mě nechat kdekoli!

Vnitřní část tělo jsou umístěny pouze dva bloky div, které obsahují oba obdélníky. Kód je celkem jednoduchý a srozumitelný. Uvnitř každého obdélníku jsou záhlaví s handler tříd a handler2 . To je důležité, protože každý obdélník se při tažení chová jinak.

Instalace CSS

HTML kód je velmi jednoduchý. Pokud rozumíte základnímu značení, pak CSS styly také nebude představovat žádné potíže. Především definované okraje, výplně a barvy.

Body,html ( font-family:Calibri, sans-serif; background:#eaf3fb; font-size:12px; height:1000px; line-height:18px; ) p ( height:30px; )

Selektory tělo, html se používají pouze pro ukázkovou stránku. A veškerý obsah je umístěn ve dvou přetahovacích obdélníkech.

Dv1 ( width:200px; background-color:#eff7ff; border:1px solid #96c2f1; position:absolute; left:100px; top:100px; ) .dv1 h2 ( background-color:#b2d3f5; padding:5px; font- rodina:Georgia, "Times New Roman", Times, patka; font-size:1.0em; text-transform:uppercase; font-weight:bold; color:#3a424a; margin:1px; cursor:move; ) .dv1 div ( padding:5px; margin-bottom:10px; ) .dv2 ( background-color:#f6ebfb; border:1px solid #a36fde; width:550px; position:absolute; kurzor:move; left:400px; top:230px; ) .dv2 h2 ( background-color:#eacfe9; letter-spacing:-0.09em; font-size:1.8em; font-weight: bold; padding:15px; margin:1px; color:#241f24; cursor:move; ) .dv2 .content2 ( padding:5px; margin-bottom:10px; )

Pro obě třídy .dv1 a .dv2 používáme absolutní umístění. To není nutné a asi ani nejvíce Nejlepší způsob k umístění přetahovatelných obdélníků. V našem příkladu však toto umístění dává smysl, protože při každém obnovení stránky se obdélníky nainstalují na určitá místa.

Také písma a barvy jsou u obdélníků odlišné, aby bylo snazší vidět rozdíl.

Jinak jsou nadpisy a obsah bloků téměř totožné. Pokud budete kopírovat styly do svého projektu, změňte před zahájením názvy. V některých případech je smysluplnější používat ID namísto tříd, například při použití techniky drag-and-drop pro jeden konkrétní blok.

Analýza JavaScriptu

Dva soubory JavaScriptu obsahují veškerý kód potřebný k tomu, aby fungoval. Vynecháme detaily práce s jQuery, protože to je nad rámec lekce. Věnujme pozornost souboru jquery.dragndrop.js.

Řádek 22 definuje funkci Drags.

$.fn.Drags = function(opts) ( var ps = $.extend(( zIndex: 20, opacity: .7, handler: null, onMove: function() ( ), onDrop: function() ( ) ), opts );

Tím se nastaví návratová proměnná a inicializační data pro Táhne. Tato metoda se velmi běžně používá při práci s jQuery k předávání možností dalším funkcím. Interně nastavujeme proměnné pro každého Dostupné možnosti pro přetahovatelné obdélníky.

Další část kódu obsahuje obslužné rutiny událostí pro proměnnou dragndrop. Obě akce táhnout A pokles volání funkcí, které jim předají parametry událostí. K těmto událostem dochází, když stisknete tlačítko myši pro přetažení objektu a poté jej uvolníte.

Var dragndrop = ( drag: function(e) ( var dragData = e.data.dragData; dragData.target.css(( vlevo: dragData.left + e.pageX - dragData.offLeft, nahoře: dragData.top + e.pageY - dragData.offTop )); dragData.handler.css(( kurzor: "přesunout" )); dragData.target.css (( kurzor: "přesunout" )); dragData.onMove(e); ), drop: function( e) ( var dragData = e.data.dragData; dragData.target.css(dragData.oldCss); //.css(( "opacity": "" )); dragData.handler.css("kurzor", dragData. oldCss.cursor); dragData.onDrop(e); $().unbind("mousemove", dragndrop.drag) .unbind("mouseup", dragndrop.drop); ) )

Naše funkce manipulují s umístěním CSS každého objektu. Změna absolutní polohy vašich objektů neovlivní fungování vašeho kódu, protože každá funkce JavaScriptu změní jakýkoli styl definovaný pro objekt.

Zbytek kódu zkontroluje handler a provede kosmetické změny jiných stylů. Zde můžete přidat změny průhlednosti, písma a barvy písma nebo přidat nové odstavce.

Funkce Drag/Drop

Druhý soubor fn.js obsahuje velmi jednoduchý kód. Čekáme, až se dokument zcela načte, a poté zavoláme naše funkce. Jsou definovány dvě instance funkce Táhne, o kterém byla řeč dříve.

Máme dva pohyblivé bloky s třídami .dv1 a .dv2. Pokud potřebujete ponechat jeden pohyblivý blok, pak stačí odstranit druhou část kódu. Přidání dalšího pohyblivého bloku je také snadné. Stačí jen přidat nová vlastnost v tomto souboru.

Prvním krokem je nastavení voleb při volání funkce. Nezapomeňte nastavit název obslužné rutiny. S tím říkáme jQuery, který handler má použít, když je stisknuto tlačítko myši v určité oblasti dokumentu. Název obslužné rutiny může být třída nebo atribut ID.

Naše první funkce má dva obslužné rutiny událostí onMove a onDrop. Oba volají nové funkce, které jsou předány aktuální události jako proměnné. Zde je kód HTML v obdélníku upraven tak, aby se aktualizoval při každém pohybu. To je skvělý efekt pro demonstraci toho, jak můžete řídit proces pomocí jednoduchých událostí jQuery.

Ve druhé funkci používáme parametry z-Index a opacity. Můžete přidat další vlastnosti CSS? ale to bude vyžadovat přepracování kódu JavaScript, aby byla zkontrolována nastavení. Můžete například předat jiný styl písma nebo hodnoty pro výšku a šířku pohyblivého obdélníku - velmi zajímavý trik!

Závěr

S trochou práce máme nyní k dispozici skvělé rozhraní pro přetahování. jQuery poskytuje obrovské výhody pro vývojáře, kteří chtějí ve svých projektech používat staré metody.

Díky tomu máme nejen funkce obsluhy událostí, ale můžeme také předávat nové proměnné do přetahovatelných bloků. To otevírá nové možnosti kreativity. Ukázka pro lekci obsahuje pouze náčrt toho, co lze pomocí takového kódu udělat.

Chcete-li používat funkce knihovny, podívejte se na dokumentaci jQuery.

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é.

Záběrem nápadu nejsou zdaleka jen internetové obchody, elektronické knihovny, vyhledávače popř Informační systémy a také 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šlenky

Vyberte, 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).

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š, 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í data

Nahrá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.

Tento 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í data

Péče o zájmy návštěvníka je vždy důležitá, ale důležité jsou i obavy developera. Nejenže můžete implementovat „drag and drop“. standardní 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 - absolutně různé 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.

Takže na stejné stránce, aniž byste ručně splnili požadavek napříč prohlížeči, se zobrazí jiná data různá zařízení a v různých prohlížečích.

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.

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í během 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.

Sečteno a podtrženo: seznámili jsme se s technologií drag and drop(drag and drop) a využili jej v praxi.