Přetahování pomocí JavaScriptu

Shrnutí: v tomto výukovém programu se dozvíte o API pro drag and drop JavaScriptu.

Úvod do JavaScriptu Drag and Drop API

HTML5 formálně zavedlo specifikaci drag-and-drop. Většina moderních webových prohlížečů implementovala nativní drag-and-drop na základě specifikace HTML5.

Ve výchozím nastavení lze přetáhnout pouze obrázek a text. Chcete-li obrázek přetáhnout, jednoduše podržte tlačítko myši a poté jej přesuňte. Chcete-li text přetáhnout, musíte zvýraznit nějaký text a přetáhnout jej stejným způsobem, jako byste přetáhli obrázek.

Specifikace HTML5 určuje, že lze přetáhnout téměř všechny prvky. Chcete-li prvek přetáhnout, přidejte do jeho značky HTML vlastnost draggable s hodnotou true. Například:

Code language: HTML, XML (xml)

Události na přetahovatelných prvcích

Když přetáhnete prvek, tyto události se spustí v následujícím pořadí:

• dragstart
• drag
• dragend

Když podržíte tlačítko myši a začnete s ním hýbat, spustí se událost dragstart na přetahovatelném prvku že táhneš. Kurzor se změní na symbol bez pádu (kruh s čárou), což znamená, že prvek nelze umístit na sebe.

Po dragstart událost se aktivuje, událost drag se aktivuje opakovaně, pokud prvek přetáhnete.

A událost dragend se aktivuje když přestanete prvek přetahovat.

Cíl všech událostí (e.target) je prvek, který se táhne.

Ve výchozím nastavení , prohlížeč nezmění vzhled přetaženého prvku. Proto můžete přizpůsobit jeho vzhled podle svých preferencí.

Události na cílech přetažení

Když přetáhnete prvek přes platný cíl přetažení, tyto události se spustí v následujícím pořadí:

• dragenter
• dragover
• dragleave nebo drop

Událost dragenter se aktivuje, jakmile při přetahování prvku přes cíl přetažení.

Po spuštění události dragenter se událost dragover opakovaně aktivuje pokud přetahujete prvek uvnitř hranice cíle přetažení.

Když přetáhnete prvek mimo hranici cíle přetažení, dragover událost přestane střílet a událost dragleave se aktivuje.

V případě, že prvek umístíte na cíl, drop událost se aktivuje namísto dragleave události.

Cíl ( ) z dragenter, dragover, dragleave a drop jsou prvky cílového přetažení.

Platný cíl přetažení

Téměř všechny prvky podporují události cílového přetažení (dragenter, dragover, dragleave a drop). Ve výchozím nastavení však neumožňují přetažení.

Pokud přetáhnete prvek nad cíl přetažení, který neumožňuje přetažení, vyhrála událost drop Nezapálí se.

Chcete-li z prvku udělat platný cíl přetažení, můžete přepsat výchozí chování dragenter a dragover události voláním metody event.preventDefault() v odpovídajících obslužných programech událostí. (Další informace najdete v sekci příkladů)

Přenos dat pomocí objektu dataTransfer

Chcete-li přenést data v akci přetažení, použijte dataTransfer objekt.

Objekt dataTransfer je majetkem události. Umožňuje vám přenášet data z přetaženého prvku do cíle přetažení.

Objekt dataTransfer má dvě metody: setData() a getData().

setData() umožňuje nastavit data operace přetažení do zadaného formátu a dat :

Code language: CSS (css)

Formát může být text/plain nebo text/uri-list. Data mohou být řetězec představující data, která se mají přidat do objektu přetažení.

Metoda getData() načte data přetažení uložená pomocí setData() metoda.

getData() přijímá jeden argument:

Formát může být text/plain nebo text/uri-list. getData() vrací řetězec uložený metodou setData() nebo prázdný řetězec, pokud operace přetažení neobsahuje data.

Příklad drag and drop JavaScriptu

Vyvineme následující jednoduchou aplikaci drag-and-drop, která předvede API pro drag and drop JavaScriptu:

Vytvořte struktura projektu

Nejprve vytvořte novou složku s názvem drag-n-drop-basics. V této složce vytvořte dvě podsložky s názvem css a js.

Zadruhé vytvořte nový soubor s názvem app.js ve složce js, style.css ve css a index.html ve složce drag-n-drop-basics.

Zatřetí, umístěte odkaz na style.css a značka skriptu, která odkazuje na app.js v souboru index.html takto:

Vytvořte soubor index.html

Vložte následující kód do souboru index.html:

V tomto souboru index.html použili jsme prvek .container k zarovnání nadpisu a prvku drop-targets.

Uvnitř prvku drop-targets jsme umístili tři div prvky se stejnou třídou box. A do prvního pole umístíme další prvek div se třídou item.

Pokud otevřete index.html a zkuste přetáhnout žluté pole, uvidíte kurzor označující, že nemůžete táhnout:

Chcete-li prvek přetáhnout, přidejte vlastnost draggable s hodnotou true na jeho značku HTML následujícím způsobem:

Code language: JavaScript (javascript)

Pokud nyní index.html uložíte, otevřete jej v prohlížeči znovu uvidíte, že můžete prvek položky přetáhnout takto:

Zpracovává události na posuvném prvku

Soubor style.css obsahuje .hide třída, která skrývá prvek:

Code language: CSS (css)

V souboru app.js přidáte následující kód:

Jak i Funguje to:

• Nejprve vyberte posuvný prvek pomocí querySelector().
• Zadruhé, připojte dragstart obslužná rutina události na přetahovatelný prvek.
• Za třetí, definujte funkci dragStart() pro zpracování dragstart událost.

Pokud otevřete soubor index.html a začnete přetahovat přetahovatelný prvek, zobrazí se zpráva drag starts... v konzole.

V dragStart obslužné rutině události musíte uložit id přetahovatelného prvku. A musíte ho skrýt:

Pokud prvek přetáhnete, uvidíte, že zmizí, jakmile začnete přetahovat.

Chcete-li to vyřešit, použijte setTimeout() funkce:

Nyní můžete přetáhnout posuvný prvek z jeho původní polohy:

Zpracování událostí na cílech přetažení

Soubor style.css má také třídu CSS s názvem .drag-over který změní styl ohraničení cíle přetažení na přerušovanou a červenou barvu:

Code language: CSS (css)

V souboru app.js potřebujete vybrat prvky cílového přetažení a zpracovat dragenter, dragover, dragleave a drop události těchto prvků:

Styl ohraničení cíle přetažení by se měl změnit, když dragenter a dragover dojde k události. Měl by obnovit styl, když dojde k události dragleave a drop.

Chcete-li to provést, přidejte a odeberte třída drag-over do cíle drop takto:

Nyní, když přetáhnete přetahovatelný prvek do jiné kapky cíl, uvidíte, že se hranice cíle přetažení mění, jak je znázorněno na následujícím obrázku:

Aby byl cíl přetažení platný, musíte zavolat event.preventDefault() do dragenter a dragover vypadají takto:

Pokud tak neučiníte, událost drop nikdy nebude spustit, protože prvek div není ve výchozím nastavení platným cílem přetažení.

Pokud přetáhnete přetahovatelný prvek na cíl přetažení, uvidíte, že kurzor změny naznačující, že můžete prvek zrušit:

Pokud tedy prvek položky zrušíte, uvidíte, že okamžitě zmizí.

Chcete-li to vyřešit problém, musíte přidat zpracování události drop.

• Nejprve získejte id tažného prvku pomocí metody getData() metody dataTransfer objekt.
• Zadruhé, přidejte posuvný prvek jako podřízený prvek cílového prvku přetažení.
• Zatřetí, odstraňte hide třída z elementu draggable.

Následující kód ukazuje kompletní drop obslužná rutina události:

Pokud nyní přetahujete přetahovatelný prvek, měl by fungovat podle očekávání.

Následující text ukazuje kompletní soubor app.js:

A tady je odkaz na ukázku.

Shrnutí

• Přidejte vlastnost draggable s hodnotou true k prvku, který umožňuje jeho přetažení.
• dragstart, drag a dragend události se střídají na přetahovatelném prvku.
• dragenter, dragover, nebo drop se aktivují na cílovém umístění.
• Zavolejte event.preventDefault() na Obslužné rutiny událostí dragenter a dragover nastaví prvek jako platný cíl přetažení.
• Použijte s metodami setData() a getData() pro přenos dat v operaci přetažení.