HTML5 – Drag & Drop (Čeština)
Drag and Drop (DnD) je výkonný koncept uživatelského rozhraní, který usnadňuje kopírování, přeskupování a mazání položek pomocí kliknutí myší. To umožňuje uživateli kliknout a podržet tlačítko myši nad prvkem, přetáhnout jej na jiné místo a uvolnit tlačítko myši, aby tam prvek umístil.
Chcete-li dosáhnout funkce přetažení pomocí tradičního HTML4, vývojáři by museli buď muset používat složité programování JavaScriptu nebo jiné rámce JavaScriptu jako jQuery atd.
Nyní HTML 5 přišlo s API Drag and Drop (DnD), které přináší nativní podporu DnD při vytváření prohlížeče je mnohem snazší kódovat.
HTML 5 DnD je podporován všemi hlavními prohlížeči, jako jsou Chrome, Firefox 3.5 a Safari 4 atd.
Akce přetažení
Existuje několik událostí, které jsou spouštěny během různých fází operace přetažení. Tyto události jsou uvedeny níže –
| st. Č. | Události & Popis |
|---|---|
| 1 |
dragstart Spustí se, když uživatel začne táhnout objekt. |
| 2 |
dragenter Vystřelí se při prvním pohybu myši nad cílovým prvkem, zatímco dochází k tažení. Posluchač této události by měl označit, zda je na tomto místě povolen pokles. Pokud neexistují žádní posluchači nebo posluchači neprovádějí žádné operace, není ve výchozím nastavení povolen pokles. |
| 3 |
Přetažení Tato událost se aktivuje, když se při přetažení myší pohybuje nad prvkem. Operace, která nastane během posluchače, bude po většinu času stejná jako událost dragenter. |
| 4 |
dragleave Tato událost je aktivována, když myš opustí prvek, zatímco dochází k přetažení. Posluchači by měli odstranit všechny značky zvýraznění nebo vložení použité pro zpětnou vazbu. |
| 5 |
táhnout Spustí se při každém pohybu myši, když se táhne objekt. |
| 6 |
přetažení Událost přetažení je aktivována na prvku, kde došlo k přetažení na konci operace přetažení. Posluchač by byl zodpovědný za načtení dat, která se přetahují, a jejich vložení na místo přetažení. |
| 7 |
dragend Spustí se, když uživatel uvolní tlačítko myši při přetahování objektu. |
Poznámka – Upozorňujeme, že jsou aktivovány pouze události přetažení; události myši, například mousemove, se během operace přetahování nespouštějí.
Objekt DataTransfer
Metody posluchače událostí pro všechny události přetažení přijímají objekt události, který má atribut jen pro čtení s názvem dataTransfer.
Event.dataTransfer vrací objekt DataTransfer přidružený k události následovně –
function EnterHandler(event) { DataTransfer dt = event.dataTransfer; .............}
Objekt DataTransfer obsahuje data o přetažení a drop operace. Tato data lze načíst a nastavit pomocí různých atributů přidružených k objektu DataTransfer, jak je vysvětleno níže –
| Sr.No. | DataTransfer atributy a jejich popis |
|---|---|
| 1 |
dataTransfer.dropEffect
|
| 2 |
dataTransfer.effectAllowed
|
| 3 |
dataTransfer.types Vrátí seznam DOMStringList obsahující formáty, které byly nastaveny v události dragstart. Pokud navíc přetahujete nějaké soubory, pak jedním z typů bude řetězec „Soubory“. |
| 4 |
dataTransfer.clearData () Odstraní data specifikovaných formátů. Odstraní všechna data, pokud je argument vynechán. |
| 5 |
dataTransfer.setData (format, data) Přidá zadaná data. |
| 6 |
data = dataTransfer.getData (formát) Vrátí zadaná data. Pokud takové údaje nejsou, vrátí prázdný řetězec. |
| 7 |
dataTransfer.files Vrátí seznam souborů, které jsou přetahovány, pokud existují. |
| 8 |
dataTransfer.setDragImage (element, x, y) Použije daný prvek k aktualizaci zpětné vazby tažení a nahradí jakoukoli dříve uvedenou zpětnou vazbu. |
| 9 |
dataTransfer.addElement (element) Přidá daný prvek do seznam prvků použitých k vykreslení zpětné vazby tažení. |
Proces přetahování
Následuje kroky, které je třeba provést při implementaci operace Drag and Drop –
Krok 1 – Vytvoření objektu, který lze přetáhnout
Zde je třeba provést kroky –
-
Chcete-li prvek přetáhnout, musíte u tohoto prvku nastavit přetahovatelný atribut na hodnotu true.
-
Nastavit posluchače událostí pro dragstart, který táhne data, která se přetahují.
-
Dragstart posluchače událostí nastaví povolené efekty (kopírování, přesunutí, propojení nebo nějaká kombinace).
Následuje příklad, kterým lze objekt přetáhnout –
Výsledkem bude následující výsledek –
Krok 2 – Vypuštění objektu
Chcete-li přijmout přetažení, musí cíl přetažení poslouchat alespoň tři události.
-
Událost dragenter, která se používá k určení, zda cíl přetažení má nebo nemá akceptovat přetažení . Pokud má být přijetí přijato, musí být tato událost zrušena.
-
Přetahovací událost, která se používá k určení, jaká zpětná vazba se má uživateli zobrazit. Pokud je událost zrušena, pak se zpětná vazba (obvykle kurzor) aktualizuje na základě hodnoty atributu dropEffect.
-
Nakonec událost drop, která umožňuje vlastní drop bude provedeno.
Následuje příklad, jak umístit objekt do jiného objektu –
Výsledkem bude následující výsledek –