HTML5 API pro drag-and-drop (DnD) znamená, že téměř jakýkoli prvek na stránce může být přetahovatelný. V tomto článku se podíváme na základy drag and drop.
Vytvářejte obsah přetahovatelný
Stojí za zmínku, že ve většině prohlížečů jsou výběry textu, obrázky a odkazy ve výchozím nastavení přetahovatelné. Například pokud přetáhnete logo Google ve vyhledávání Google, uvidíte ducha obrázku. Obraz lze pak přetáhnout a vložit do adresního řádku <input type="file" /> prvek, nebo dokonce na plochu. Aby byly jiné typy obsahu tahatelné, musíte použít HTML5 DnD API.
Pro přetahování objektu nastavte prvekdraggable=true。 Tahání může být podporováno téměř u jakéhokoli prvku, včetně obrázků, souborů, odkazů, souborů nebo jakéhokoliv značení na stránce.
V našem příkladu vytvoříme rozhraní pro přeskupování některých sloupců, které byly rozloženy pomocí CSS Grid. Základní značkování pro tyto sloupce je uvedeno níže, přičemž vlastnost tahání je nastavena na true pro každý sloupec.
Tady je CSS pro mé kontejnerové a boxové prvky. Všimněte si, že jediný CSS související s funkcionalitou DnD je vlastnost kurzor: move. Zbytek kódu ovládá pouze rozložení a styl prvků kontejneru a krabice.
V tu chvíli uvidíte, že můžete předmět přetáhnout, ale nic dalšího se nestane. Pro přidání DnD funkcionality musíme použít JavaScript API.
Poslouchejte drag akce
Lze připojit mnoho různých událostí, které monitorují celý proces drag-and-drop.
- Dragstart
- táhnout
- Dragenter
- dragleave
- Dragover
- kapka
- Táhnout
Pro zpracování DnD streamu potřebujete nějaký zdrojový prvek (výchozí bod dragu), datový payload (to, co se snažíte umístit) a cíl (oblast, kde je snap umístěn). Zdrojové prvky mohou být obrázky, seznamy, odkazy, objekty souborů, HTML bloky atd. Cílem je přijmout zónu vyhození (nebo sadu zón vyhození) dat, která se uživatel snaží umístit. Mějte na paměti, že ne všechny prvky mohou být cílem, například obrázky nemohou být cílem.
Začněte a ukončete sekvenci drag-and-drop
Po definování vlastnosti draggable="true" na obsahu připojte obslužník dragstart event handler, který spustí sekvenci DnD pro každý sloupec.
Tento kód nastaví neprůhlednost sloupce na 40 %, když uživatel začne táhnout, a na konci události přetahování ji vrátí na 100 %.
Výsledky lze vidět v demu Glitch níže. Přetáhnete položku a stane se neprůhlednou. Protože dragstart akce cílí na zdrojový prvek, nastavení this.style.opacity na 40 % dává uživateli vizuální zpětnou vazbu, že právě vybraný prvek se pohybuje. Po umístění položky se zdrojový prvek vrátí na 100% neprůhlednost, i když funkce umístění ještě není zapsána.
Použijte dragenter, dragover a dragleave, abyste přidali další vizuální nápovědy
Aby uživatelé lépe pochopili, jak interagovat s vaším rozhraním, použijte obslužníky událostí dragenter, dragover a dragleave. V následujícím příkladu lze sloupce přetáhnout nebo cíleně zacílit. Aby uživatelé lépe pochopili, když uživatel přetáhne položku kolem sloupce, okraj tohoto sloupce se změní na tečkovanou čáru. Například můžete vytvořit nadtřídu v CSS, která reprezentuje prvek, který je cílem umístění:
Poté nastavte v JavaScriptu event handler, který přidá nadklasu při přetahování kolem sloupce a odstraní ji při odchodu. V obsluze přetahování také chceme zajistit, aby byla třída odstraněna na konci přetahování.
V tomto kódu je třeba zmínit několik bodů:
Při přetahování prvku, jako je odkaz, musíte zablokovat výchozí chování prohlížeče, tedy navigaci na tento odkaz. K tomu zavolejte e.preventDefault() v události dragover. Další dobrou praxí je vracet false ve stejném handleru.
Použijte obslužný handler událostí dragenter pro přepínání tříd, ne pro přetahování. Pokud použijete přetahování, třída CSS se přepne několikrát, protože se událost přetahování spouští při zanášení sloupce. Nakonec to způsobí, že renderer prohlížeče udělá spoustu zbytečné práce. Nejlepší je vždy omezovat přetahování na minimum. Pokud z nějakého důvodu potřebujete použít dragover eventy, zvažte omezení nebo odstranění eventových posluchačů.
Dokončit umístění
Pro samotné umístění přidejte event listener pro drop event. V drop handleru musíte blokovat výchozí chování při umisťování v prohlížeči, což je obvykle nějaký otravný přesměrování. e.stopPropagation() lze volat tak, aby se zabránilo spuštění DOM.
Ujistěte se, že jste nového handlera registrovali v tom druhém handleru:
Pokud kód spustíte v tuto chvíli, projekt nebude umístěn na nové místo. K tomu je potřeba použít objekt DataTransfer.
Vlastnost dataTransfer je místo, kde se dějí všechny DnD zázraky. Ukládá datové fragmenty odeslané při operaci tažení. dataTransfer je nastaven v události dragstart a čtení/zpracování v události drop. Zavolejte e.dataTransfer.setData(mimeType, dataPayload) pro nastavení typu MIME a datového obsahu objektu.
V následujícím příkladu umožníme uživatelům přeuspořádat pořadí sloupců. K tomu musíte nejprve uložit HTML zdrojového prvku na začátek přetahování:
Vyřiďte umístění sloupců v události drop, nastavte HTML zdrojového sloupce na HTML cílového sloupce, kde je umístěn, nejprve zkontrolujte, že cílový sloupec, který uživatel přetáhne a vyřadí, je stejný jako zdrojový sloupec.
Další vlastnosti odporu
Objekt dataTransfer zpřístupňuje vlastnosti, které slouží k vizuální zpětné vazbě uživateli během procesu přetahování. Tyto vlastnosti lze také použít k řízení, jak každý cílový umístění reaguje na konkrétní datové typy.
- dataTransfer.effectAllowed omezuje "typ dragu", který může uživatel na prvek provést. Používá se v modelu pro zpracování drag-and-drop k inicializaci dropEffect během dragenter a dragover událostí. Tuto vlastnost lze nastavit na následující hodnoty: none, copy, copyLink, copyMove, link, linkMove, move, all a uninitialized.
- dataTransfer.dropEffect ovládá zpětnou vazbu poskytovanou uživateli během událostí dragenter a dragover. Když uživatel najede na cílový prvek, kurzor prohlížeče ukáže typ akci, kterou má být provedena (např. zkopírovat, přesunout atd.). Efekt může být jedna z následujících hodnot: žádný, kopírovat, odkazovat, přesunout.
- e.dataTransfer.setDragImage(imgElement, x, y) znamená, že výchozí zpětná vazba "duchového obrázku" prohlížeče není použita, ale místo toho je zde možnost nastavit ikonu táhnutí.
Nahrávejte soubory přetahováním a upouštěním
Následující jednoduchý příklad používá sloupec jako zdroj přetahování a cíl pro přetahování. To je vidět v uživatelském rozhraní, když je uživatel požádán o přeskupení položek. V některých případech může být přetažení cíle a přetažení zdroje odlišné, například v rozhraní, kde uživatel potřebuje vybrat obrázek jako hlavní obrázek produktu přetažením vybraného obrázku na cíl.
Často se používá přetahování souborů z plochy do aplikace. Hlavní rozdíl je v drop handleru. Bez použití dataTransfer.getData() pro přístup k souboru budou data souboru zahrnuta ve vlastnosti dataTransfer.files:
Původní odkaz:Přihlášení k hypertextovému odkazu je viditelné.
|
Zveřejněno 26. 4. 2022 10:30:50
|
|
|
|
Zveřejněno 2022-4-26 21:27:25
|
