TL; DR – Rozhraní API pro přetahování HTML5 vám umožňuje chyťte objekt HTML kurzorem a přetáhněte jej na jiné místo.
Co můžete v HTML5 přetáhnout?
HTML5 vám umožňuje provést přetažení libovolného prvku, což vám umožňuje zvednout jej kurzorem a přetáhnout jej na jiné místo, které je definováno jako droppable prvek. V níže uvedeném příkladu zkuste přetáhnout obrázek na čtverec:
Tato funkce zjednodušuje uživatelský komfort a umožňuje dokonce i vytváření jednoduchých online her (například můžete přetahovat virtuální šachové figurky). Když přetáhnete prvek, jeho průhledná replika se bude pohybovat spolu s kurzorem, dokud jej neuvolníte uvolněním tlačítka myši.
Technicky vzato je Drag and Drop JavaScript API přidané do HTML5. Proto je důležité mít alespoň základní znalosti skriptování, abyste s touto funkcí mohli pracovat.
Události pro přetažení HTML5
V tabulce níže uvidíte všechny události, které jsou relevantní pro funkci Drag and Drop:
| Událost | Vysvětlení |
|---|---|
| přetáhnout | Kurzor se pohybuje při přetahování prvku |
| přetažení | Proces přetahování je dokončen |
| dragstart | Kurzor zvedne prvek a začne táhnout |
| dragend | Tlačítko myši se uvolní a prvek se spustí |
| dragenter | Kurzor vstoupí do cílového prvku |
| dragleave | Kurzor opustí cílový prvek |
| přetažení | Kurzor se přesune na cílový prvek |
Krok za krokem Vysvětlení přetažení
Kódování přetažení HTML5 se na první pohled zdá být docela komplikované, protože obsahuje skriptování v JS. Pojďme si však prostudovat jednotlivé části procesu, abychom je snáze pochopili.
Přetahovatelné prvky
Nejprve se musíte ujistit, že prvek, který chcete přetáhnout, má Byl použit atribut HTML5 draggable a jeho hodnota byla nastavena na true:
Přetažení
Poté definujte, co by se mělo stát po přetažení objektu. Můžete to provést voláním obslužná rutina události pro událost dragstart a definující funkci, která má být provedena.
Hodnotu a datový typ přetažených dat musí nastavit dataTransfer.setData() metoda:
Vyřazení
Přetažitelná data HTML5 jsou specifikována připojením obslužné rutiny události k události dragover.
Prvky a data nelze ve výchozím nastavení upuštěno v jiných prvcích. To znamená, že musíte zastavit prvky prvku výchozí chování pomocí metody event.preventDefault():
K události drop dojde při zrušení přetahovatelných dat HTML5. Volá jej ondrop obslužná rutina události:
Konečný kód: příklad
V zásadě potřebujete svůj kód, abyste mohli proveďte čtyři kroky:
- Zabraňte výchozí akci webového prohlížeče související s daty voláním
preventDefault() - Získat data pomocí metody
dataTransfer.getData() - Připevnit přetažený prvek na prvek přetažení
Podívejme se, jak to funguje v níže uvedený příklad:
Přetahování HTML5: Užitečné tipy
- Můžete přetahovat různé typy prvků, mimo jiné soubory, odkazy, obrázky a text.
- Můžete také přetáhnout více prvků najednou. Z důvodu konzistence se však doporučuje mít všechny ve stejném formátu.
- Prvky formulářů, které přijímají vstup uživatele, mohou být ve výchozím nastavení droppable areas.