Jak používat HTML Drag and Drop API

Funkce drag and drop (přetahování) je klíčovým prvkem, který zvyšuje interakci uživatele s webovou stránkou a přispívá k plynulému uživatelskému zážitku. Ať už je vaším cílem vytvořit nástroj pro nahrávání souborů, seznam pro řazení položek nebo interaktivní hru, znalost a využití možností tohoto rozhraní API představuje zásadní dovednost ve vašem arzenálu webového vývojáře.

Základy přetahování v HTML

Běžný systém přetahování se skládá ze dvou typů prvků. První skupina zahrnuje prvky, které lze přetahovat a které uživatelé mohou přesouvat pomocí myši. Druhá skupina definuje cílové oblasti, kam mohou uživatelé přetahované prvky umisťovat.

Pro aktivaci funkce přetahování je nutné informovat prohlížeč, které elementy mají být přetahovatelné. Prvek se stává přetahovatelným nastavením atributu HTML draggable na hodnotu true. Například:

<div draggable="true">Tento prvek lze přetáhnout</div>

Když uživatel zahájí přetahování, prohlížeč standardně zobrazí „duchový“ obrázek, který vizuálně reprezentuje přetahovaný prvek.

Tento výchozí vzhled lze přizpůsobit nahrazením vlastním obrázkem. Pro tento účel vyberte přetahovatelný element z DOM, vytvořte nový obrázek, který bude sloužit jako zpětná vazba, a připojte posluchač události dragstart následujícím způsobem:

 let img = new Image();
img.src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png";
document.querySelector('div').addEventListener('dragstart', (event)=>{
  event.dataTransfer.setDragImage(img, 10, 10);
})
 

V uvedeném kódu metoda setDragImage přijímá tři parametry. První je odkaz na obrázek, a zbylé dva definují horizontální a vertikální posun obrázku. Po spuštění kódu v prohlížeči a zahájení přetahování prvku si všimnete, že výchozí „duch“ byl nahrazen vaším vlastním obrázkem.

Pokud chcete povolit upuštění na cílovém prvku, musíte zabránit výchozímu chování prohlížeče zrušením událostí dragenter a dragover takto:

 const dropElement = document.querySelector("drop-target");
dropElement.addEventListener("dragenter", (ev) => {
 ev.preventDefault();
});
dropElement.addEventListener("dragover", (ev) => {
 ev.preventDefault();
});
 

Porozumění rozhraní DragEvent

JavaScript disponuje rozhraním DragEvent, které reprezentuje interakci uživatele během přetahování. Následuje seznam možných typů událostí v rozhraní DragEvent:

• drag: Uživatel vyvolá tuto událost během přetahování prvku.
• dragend: Tato událost nastane, když se přetahování ukončí nebo je uživatel zruší. Typicky dojde k ukončení po uvolnění tlačítka myši nebo stisknutí klávesy Escape.
• dragenter: Přetahovaný prvek spustí tuto událost při vstupu do validní cílové oblasti.
• dragleave: Tato událost se spustí, když tažený prvek opustí cílovou oblast.
• dragover: Během přetahování prvku nad cílovou oblast se opakovaně spouští tato událost.
• dragstart: Událost se spustí na začátku procesu přetahování.
• drop: Uživatel vyvolá tuto událost upuštěním prvku do cílové oblasti.

Při přetahování souboru do prohlížeče z prostředí mimo prohlížeč (například z průzkumníka souborů operačního systému) prohlížeč neaktivuje události dragstart ani dragend.

DragEvent se může hodit, když chcete programově odesílat vlastní události přetahování. Například, pokud chcete, aby div spouštěl vlastní události přetahování při načtení stránky, postupujte takto: nejprve vytvořte novou vlastní DragEvent():

 const customDragStartEvent = new DragEvent('dragstart', {
 dataTransfer: new DataTransfer(),
})
const customDragEndEvent = new DragEvent('dragend');
 

V uvedeném kódu customDragStartEvent představuje instanci DragEvent(). V konstruktoru customDragStartEvent jsou dva argumenty. První definuje typ události přetažení, což může být jeden ze sedmi zmíněných typů událostí. Druhým argumentem je objekt s klíčem dataTransfer, který reprezentuje instanci DataTransfer, o které se dozvíte více později.

Dále uchopte prvek, ze kterého chcete událost spustit, z DOM (Document Object Model).

 const draggableElement = document.querySelector("#draggable");

Následně přidejte posluchače událostí takto:

 draggableElement.addEventListener('dragstart', (event) => {
 console.log('Přetažení zahájeno!');
 event.dataTransfer.setData('text/plain', 'Ahoj, světe!'); 
 });
 draggableElement.addEventListener('dragend', () => {
 console.log('Přetažení ukončeno!');
 });
 

V prvním posluchači událostí výše, zpětná volací funkce zaloguje text „Přetažení zahájeno!“ a vyvolá metodu setData na vlastnosti dataTransfer objektu události. Nyní můžete spouštět vlastní události takto:

 draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);

Přenos dat pomocí DataTransfer

Objekt dataTransfer slouží jako spojovací článek mezi zdrojovým prvkem (přetahovanou položkou) a cílovým prvkem (cílovou oblastí) během procesu přetahování. Funguje jako dočasné úložiště pro data, která chcete mezi těmito prvky sdílet.

Tato data mohou být různého typu, například text, URL adresy nebo i vlastní datové typy, což z nich činí univerzální nástroj pro implementaci široké škály funkcí přetahování.

Použití setData() pro zabalení dat

Pro přenesení dat z přetahovatelného prvku do cílového prvku se použije metoda setData(), kterou poskytuje objekt dataTransfer. Tato metoda umožňuje zabalit data, která chcete přenést, a specifikovat jejich typ. Zde je základní příklad:

 element.addEventListener('dragstart', (event) => {
 event.dataTransfer.setData('text/plain', 'Ahoj, světe!');
});

Když uživatel zahájí přetahování specifikovaného prvku, metoda setData() zabalí text „Ahoj, světe!“ s datovým typem text/plain. Tato data jsou nyní spojená s událostí přetažení a cílový element k nim může přistupovat během procesu přetahování.

Načítání dat pomocí getData()

Na straně příjemce, v rámci posluchače události cílového prvku, můžete načíst přenesená data pomocí metody getData():

 element.addEventListener('drop', (event) => {
 const transferredData = event.dataTransfer.getData('text/plain');
 console.log(`Přijatá data: ${transferredData}`);
});

Výše uvedený blok kódu načte data se stejným datovým typem (text/plain), který byl nastaven metodou setData() dříve. To vám umožňuje přístup k přeneseným datům a manipulaci s nimi dle potřeby v kontextu cílového prvku.

Případy použití rozhraní Drag and Drop

Integrace funkcí přetahování do vašich webových aplikací může být velmi užitečným vylepšením. Je ale důležité porozumět, kdy a proč byste ji měli implementovat.

• Nahrávání souborů: Umožnění uživatelům přetahovat soubory přímo z jejich plochy nebo správce souborů do určené oblasti zjednodušuje proces nahrávání.
• Seřaditelné seznamy: Pokud vaše aplikace obsahuje seznamy položek, jako jsou seznamy úkolů, seznamy skladeb nebo galerie obrázků, uživatelé ocení možnost měnit pořadí položek přetažením.
• Interaktivní řídicí panely: U nástrojů pro vizualizaci dat a vytváření sestav může být přetažení efektivním způsobem, jak si uživatelé mohou přizpůsobit své panely přeskupováním widgetů a grafů.

Mějte na paměti přístupnost

I když přetahování může být vizuálně atraktivní a zlepšit uživatelský zážitek, je klíčové zajistit, aby vaše implementace zůstala přístupná všem uživatelům, včetně těch s postižením. Zajištění alternativních metod interakce, například ovládání pomocí klávesnice, zajistí inkluzivitu vaší aplikace.