Jak vytvořit elementy drag and drop pomocí skriptu Vanilla JavaScript a HTML

Úvod

Přetahování je běžná interakce uživatele, kterou najdete v mnoha grafických uživatelských rozhraních.

Existují knihovny JavaScriptu pro přidání funkce přetažení do vaší aplikace. Mohou však nastat situace, kdy knihovna není k dispozici nebo zavádí režii nebo závislost, kterou váš projekt nepotřebuje. V těchto situacích může znalost API, která máte k dispozici v moderních webových prohlížečích, nabídnout alternativní řešení.

Rozhraní HTML Drag and Drop API se spoléhá na model událostí DOM, aby získalo informace o tom, co se přetahuje nebo klesá aktualizovat daný prvek přetažením. Pomocí obslužných rutin událostí JavaScriptu můžete libovolný prvek přeměnit na přetahovatelnou položku nebo položku, do které lze spadnout.

V tomto výukovém programu vytvoříme příklad přetažení pomocí přetažení HTML API s vanilkovým JavaScriptem pro použití obslužných rutin událostí.

Předpoklady

K dokončení tohoto kurzu budete potřebovat:

• Moderní webový prohlížeč, který podporuje Drag and Drop API (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).

Krok 1 – Vytvoření projektu a počáteční označení

Náš projekt bude sestávat z kontejneru se dvěma typy podřízených prvků:

• Podřízené prvky, které můžete přetahovat
• Podřízené prvky, do kterých mohou být prvky spadnuty

Nejprve otevřete okno terminálu a vytvořte nový adresář projektu:

Dále přejděte do tohoto adresáře:

Poté v tomto adresáři vytvořte soubor index.html:

Dále přidejte základní kód pro webovou stránku HTML:

A mezi přidají vaši položku draggable a váš dropzone (cílový cíl):

Uložte a zavřete soubor. Poté vytvořte style.css soubor:

Dále přidejte styly pro prvky v našem index.html soubor:

Tím se do aplikace přidá určité formátování. Nyní můžete v prohlížeči zobrazit index.html a sledovat, že se tím vytvoří draggable <div> a a dropzone <div>.

Dále explicitně nastavíme první <div> přetahovatelný přidáním atributu draggable:

Uložte a zavřete soubor.

Nakonec znovu zobrazte index.html v prohlížeči. Pokud klikneme na draggable <div> a přetáhneme jej přes obrazovku, měla by existovat vizuální indikace jeho pohybu.

Výchozí hodnota pro atribut draggable je auto. To znamená, zda lze prvek přetáhnout, bude určeno výchozím chováním vašeho prohlížeče. To obvykle znamená, že výběry textu, obrázky a odkazy lze přetahovat bez zadání draggable="true".

Nyní máte soubor HTML s přetahovatelným prvkem. Přejdeme k přidávání obslužných rutin onevent.

Krok 2 – Zpracování událostí přetažení pomocí JavaScriptu

Aktuálně, pokud uvolněte myš při tažení přetahovatelného prvku, nic se neděje. Chcete-li spustit akci s přetažením prvků DOM, musíme použít API pro přetažení:

• ondragstart: Tento obslužný program události bude připojen k našemu draggable prvku a spustí se, když dojde k dragstart události.
• ondragover: Tento obslužný program události bude připojen k našemu dropzone prvku a spustí se, když dojde k dragover události.
• ondrop: Tento obslužný program události bude také připojen k našemu elementu dropzone a spustí se, když drop dojde k události.

Poznámka: Celkově existuje osm obslužných rutin událostí: ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart a ondrop. V našem příkladu nebudeme vyžadovat všechny.

Nejprve si odkazujme nový https://www.digitalocean.com/community/tutorials/script.js soubor v našem index.html:

Dále vytvořte nový https://www.digitalocean.com/community/tutorials/script.js file:

Objekt DataTransfer bude sledovat informace související s aktuálním přetažením. Chcete-li aktualizovat náš prvek při přetahování, musíme přímo přistupovat k objektu DataTransfer.K tomu můžeme vybrat vlastnost dataTransfer z DragEvent prvku DOM.

Poznámka: DataTransfer objekt může technicky sledovat informace o více prvcích tažených současně. V našem příkladu se zaměříme na přetažení jednoho prvku.

Metoda dataTransfer objektu setData lze použít k nastavení informací o stavu přetažení pro aktuálně přetažený prvek. Trvá dva parametry:

• řetězec, který deklaruje formát druhého parametru
• skutečná přenášená data

náš cíl je přesunout náš draggable prvek na nový nadřazený prvek. Musíme být schopni vybrat náš draggable prvek s jedinečným id. Můžeme nastavit id přetaženého prvku metodou setData, abychom ji mohli později použít.

Pojďme znovu navštivte náš https://www.digitalocean.com/community/tutorials/script.js soubor a vytvořte novou funkci pro použití setData:

Poznámka: Internet Explorer 9 až 11 má údajně problémy s používáním "text/plain". Formát musí být pro daný prohlížeč "text".

Chcete-li aktualizovat styl CSS přetažené položky, můžeme k jejím stylům přistupovat pomocí události DOM znovu a nastavení libovolných stylů, které chceme pro currentTarget.

Přidejme si naši funkci a změňme backgroundColor na yellow:

Poznámka: Všechny styly, které změníte, je třeba znovu ručně aktualizovat on drop, pokud chcete styly jen pro přetahování. Pokud při zahájení přetahování něco změníte, přetažený prvek zachová tento nový styl, pokud jej nezměníte zpět.

Nyní máme pro začátek přetahování naši funkci JavaScriptu.

Můžeme přidat ondragstart k prvku draggable v index.html:

Zobrazte index.html ve svém prohlížeči. Pokud se nyní pokusíte položku přetáhnout, použije se styl deklarovaný v naší funkci:

Nic se však nestane když uvolníte kliknutí.

Další obslužná rutina události spuštěná v tomto pořadí je ondragover.

Výchozí chování při přetažení pro určité prvky DOM jako <div> s v prohlížečích obvykle nepřijímá upuštění. Toto chování zachytí chování, které se pokoušíme implementovat. Abychom zajistili, že získáme požadované chování při přetažení, použijeme preventDefault.

Vraťme se znovu k souboru https://www.digitalocean.com/community/tutorials/script.js a vytvořte novou funkci pro použití preventDefault. Přidejte tento kód na konec souboru:

Nyní, můžeme přidat ondragover do našeho dropzone prvku v index.html:

V tomto okamžiku jsme ještě nenapsali kód, který by zpracovával skutečné zrušení. Poslední obslužná rutina události vystřelená v tomto pořadí je ondrop.

Vraťme se znovu k našemu https://www.digitalocean.com/community/tutorials/script.js souboru a vytvořme novou funkci .

Na data, která jsme dříve uložili, můžeme odkazovat metodou dataTransfer objektu setData. Použijeme metodu dataTransfer objektu getData. Data, která jsme nastavili, byla id, takže nám budou vrácena:

Vyberte náš prvek draggable s id, který jsme načetli:

Vyberte naše dropzone element:

Připojte naši draggable prvek do dropzone:

Resetovat náš dataTransfer objekt:

Nyní můžeme přidat ondrop do našeho dropzone prvku v index.html:

Jakmile je vše hotové, máme hotovou funkci přetahování. Zobrazte index.html ve svém prohlížeči a přetáhněte prvek draggable do dropzone.

Náš příklad zpracovává scénář jediné přetahovatelné položky a jediného cíle přetažení. Můžete mít více přetahovatelných položek, více cílů přetažení a přizpůsobit je pomocí všech ostatních obslužných rutin událostí rozhraní API přetažení.

Krok 3 – Vytvoření pokročilého příkladu s více přetažitelnými položkami

Zde je ještě jeden příklad, jak byste mohli použít toto API: seznam úkolů s přetažitelnými úkoly, ze kterých můžete přesouvat sloupec "To-do" do sloupce "Done".

Chcete-li vytvořit svůj vlastní seznam úkolů, přidejte více přetahovatelných prvků s jedinečnými id s to index.html:

Zobrazit index.html ve vašem prohlížeče a přetáhněte položky ve sloupci Úkoly do sloupce Hotovo. Vytvořili jste aplikaci úkolů a otestovali jste funkčnost.

Závěr

V tomto článku jste vytvořili aplikaci úkolů, která prozkoumává funkce přetažení myší, která je k dispozici moderním webovým prohlížečům.

Rozhraní API Drag and Drop poskytuje několik možností přizpůsobení vašich akcí kromě přetahování. Můžete například aktualizovat styl CSS vašich přetažených položek. Namísto přesunu položky se můžete rozhodnout zkopírovat svoji přetažitelnou položku tak, aby se při přetažení replikovala.

Mějte na paměti, že i když mnoho webových prohlížečů tuto technologii podporuje, možná se nebudete moci spolehnout na tom, pokud se vaše publikum skládá ze zařízení, která tuto funkci nepodporují.

Chcete-li se dozvědět více o všem, co můžete pomocí rozhraní Drag and Drop API přetáhnout, podívejte se na dokumenty MDN.