Rozhraní API HTML5 Drag and Drop (DnD) znamená, že můžeme umožnit přetahování téměř jakéhokoli prvku na naší stránce. V tomto příspěvku vysvětlíme základy funkce Drag a přetažení.
Vytváření přetahovatelného obsahu #
Stojí za povšimnutí, že ve většině prohlížečů lze výběry textu, obrázky a odkazy ve výchozím nastavení přetahovat. Logo Google ve Vyhledávání Google uvidíte duchovní obrázek. Obrázek lze poté zahodit do adresního řádku, prvku <input type="file" /> nebo dokonce na plochu. Chcete-li přetáhnout jiné typy obsahu musíte použít API HTML5 DnD.
Chcete-li objekt přetáhnout, nastavte draggable=true na tento prvek. Přetahovat lze téměř cokoli, obrázky, soubory , odkazy, soubory nebo jakékoli označení na vaší stránce.
V našem příkladu vytváříme rozhraní pro přeskupení některých sloupců, které byly rozloženy pomocí CSS Grid. Základní označení mých sloupců vypadá takto toto, přičemž každý sloupec má
atribut nastaven natrue.
Zde je CSS pro mé prvky kontejneru a pole. Všimněte si, že jediný CSS související s funkcí DnD je vlastnost cursor: move. Zbytek kódu řídí pouze rozložení a styl prvků kontejneru a pole.
V tomto okamžiku zjistíte, že můžete položky přetáhnout, ale nic jiného se nestane. Chcete-li přidat funkčnost DnD, musíme použít API JavaScriptu.
Poslech událostí přetažení #
Existuje celá řada různých událostí, ke kterým se připojíte ke sledování celého procesu přetahování.
-
dragstart -
drag -
dragenter -
dragleave -
dragover -
drop -
dragend
Ke zpracování toku DnD potřebujete nějaký zdrojový prvek (odkud táhne), datový pa yload (co se snažíte upustit) a cíl (oblast pro zachycení dropu). Zdrojovým prvkem může být obrázek, seznam, odkaz, objekt souboru, blok HTML atd. Cíl je zóna přetažení (nebo sada zón přetažení), která přijímá data, která se uživatel pokouší přetáhnout. Pamatujte, že ne všechny prvky mohou být terčem, například obrázek nemůže být terčem.
Počátek a konec sekvence přetažení #
Jakmile máte ve svém obsahu definovány draggable="true" atributy, připojte dragstart obslužnou rutinu události nastartuje sekvenci DnD pro každý sloupec.
Tento kód nastaví neprůhlednost sloupce na 40%, když jej uživatel začne přetahovat, a poté jej vrátí na 100%, když událost přetahování skončí.
Výsledek lze vidět v ukázce Glitch níže. Přetáhněte položku a stane se neprůhlednou. Protože cílem události dragstart je zdrojový prvek, nastavení this.style.opacity na 40% dává uživateli vizuální zpětná vazba, že prvek je aktuálním přesouvaným výběrem. Jakmile položku přetáhnete, ačkoli funkce přetažení není na místě, zdrojový prvek se vrátí na 100% neprůhlednost.
Přidejte další vizuální narážky pomocí funkcí dragenter, dragover a dragleave #
Chcete-li uživateli pomoci pochopit, jak komunikovat s vaším rozhraním, použijte dragenter, dragover a dragleave. V tomto příkladu jsou sloupce kromě přetahování také cílové oblasti přetažení. pochopit to tak, že ohraničení bude přerušované, protože drží přetaženou položku nad sloupcem. Například v CSS můžete vytvořit třídu over, která bude reprezentovat prvky, které jsou cílovými cíli:
Pak ve svém J avaScript nastaví obslužné rutiny událostí, přidá třídu over, když je sloupec přetažen, a odebere ji, když odcházíme. dragend handler také zajistíme odstranění tříd na konci tažení.
V tomto kódu je několik bodů, které stojí za to pokrýt :
- V případě přetažení něčeho jako odkazu musíte zabránit výchozímu chování prohlížeče, kterým je navigace na tento odkaz. Chcete-li to provést, volejte
e.preventDefault()v událostidragover. Dalším dobrým postupem je vrátitfalsedo stejného obslužného programu. - Obsluha události
dragenterslouží k přepínání třídyovernamístodragover.Pokud použijetedragover, třída CSS by byla mnohokrát přepnuta, protože událostdragoverpokračovala v palbě na vznášející se sloupci. Nakonec to by způsobilo vykreslovací modul prohlížeče dělá velké množství zbytečné práce. Udržet překreslení na minimum je vždy dobrý nápad.Pokud potřebujete k něčemu použít událostdragover, zvažte nasazení nebo odskakování posluchače událostí.
Dokončení drop #
Chcete-li zpracovat skutečný pokles, přidejte posluchače událostí pro událost drop. V obslužné rutině drop budete muset zabránit výchozí chování prohlížeče pro kapky, což je obvykle nějaký druh nepříjemného přesměrování. Události můžete zabránit v probublávání DOM voláním e.stopPropagation().
Pokud v tomto okamžiku spustíte kód, položka se nedostane na nové místo. K dosažení tohoto cíle musíte použít DataTransfer objekt.
Vlastnost dataTransfer je místo, kde se odehrává veškerá magie DnD. Obsahuje část dat odeslaných při akci přetažení. je nastaven v události dragstart a přečten / zpracován v události přetažení. Volání e.dataTransfer.setData(mimeType, dataPayload) umožňuje nastavit objekt „s Typ MIME a užitečné zatížení dat.
V tomto příkladu „dovolíme uživatelům přeskupit pořadí sloupců. Nejprve je třeba při přetahování uložit HTML zdrojového prvku začíná:
V události drop zpracováváte pokles sloupce, nastavení kódu HTML zdrojového sloupce na HTML cílového sloupce, na který jste umístili, nejprve zkontrolujte, zda uživatel neklesá zpět na stejný sloupec, ze kterého přetáhl.
Můžete vidět výsledek v následujícím demu. Přetáhněte a uvolněte sloupec A nad sloupcem B a všimněte si, jak mění místa:
více vlastnosti přetahování #
Objekt dataTransfer vystavuje vlastnosti, které uživateli během procesu přetahování poskytují vizuální zpětnou vazbu. Tyto vlastnosti lze také použít k ovládání toho, jak každý cíl přetažení odpovídá na konkrétní datový typ.
-
dataTransfer.effectAllowedrestric Jaký „typ přetažení“ může uživatel provést u elementu. Používá se v modelu zpracování přetažením k inicializacidropEffectběhemdragenteradragoverudálosti. Vlastnost lze nastavit na následující hodnoty:none,copy,copyLink,copyMove,link,linkMove,move,allauninitialized. -
dataTransfer.dropEffectřídí zpětnou vazbu, kterou uživatel dostane běhemdragenteradragoverevents.When the user hovers over a target element, the browserss cursor will indicate what type of operation will will be place (eg kopie, tah atd.). Efekt může nabývat jedné z následujících hodnot:none,copy,link,move. -
e.dataTransfer.setDragImage(imgElement, x, y)znamená, že místo použití prohlížeče “ Při výchozí zpětné vazbě „duchů“ můžete volitelně nastavit ikonu přetažení.
Nahrávání souborů pomocí přetažení #
Tento jednoduchý příklad používá sloupec jako Zdroj přetažení a cíl přetažení. To lze vidět v uživatelském rozhraní, kde je uživatel vyzván k přeskupení položek. V některých situacích se cíl přetažení a zdroj mohou lišit, například rozhraní, kde uživatel potřebuje vybrat jeden obrázek, aby byl hlavní obrázek produktu přetažením vybraného obrázku na cíl.
Přetahování a přetahování se často používá k tomu, aby uživatelé mohli přetahovat položky ze svého počítače do aplikace. Hlavní rozdíl spočívá ve vašem drop obslužná rutina. Namísto použití dataTransfer.getData() pro přístup k souborům, jejich datům Bude obsažen ve vlastnosti dataTransfer.files:
Více informací o tomto najdete ve vlastním přetažení.