Drag and drop je základní funkce, která zlepšuje interakci uživatele a usnadňuje bezproblémový uživatelský zážitek. Ať už chcete vytvořit nástroj pro nahrávání souborů, seznam pro seřazení nebo interaktivní hru, pochopení toho, jak využít možnosti tohoto rozhraní API, je klíčovou dovedností, kterou musíte mít ve své sadě nástrojů pro vývoj webu.
Table of Contents
Základy drag and drop v HTML
V typickém systému přetahování existují dva typy prvků: první typ obsahuje přetahovatelné prvky, které mohou uživatelé přemisťovat pomocí myši, a druhý typ zahrnuje přetahovatelné prvky, které obvykle určují, kam mohou uživatelé umístit prvek.
Chcete-li implementovat drag and drop, musíte prohlížeči sdělit, jaké prvky chcete přetáhnout. Aby uživatel mohl prvek přetahovat, měl by mít atribut HTML pro přetahování nastavený na hodnotu true, například takto:
<div draggable="true">This element is draggable</div>
Když uživatel spustí událost přetažení, prohlížeč poskytne výchozí obrázek „duch“, který obvykle poskytuje zpětnou vazbu týkající se přetahovaného prvku.
Tento obrázek můžete upravit tak, že místo něj dodáte svůj vlastní obrázek. Chcete-li to provést, vyberte přetahovatelný prvek z modelu DOM, vytvořte nový obrázek, který bude představovat vlastní obrázek zpětné vazby, a přidejte posluchač události přetažení dragstart takto:
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);
})
Ve výše uvedeném bloku kódu má metoda setDragImage tři parametry. První parametr odkazuje na obrázek. Ostatní parametry představují horizontální a vertikální ofsety obrazu. Když spustíte kód v prohlížeči a začnete přetahovat prvek, všimnete si, že vlastní obrázek přetažení byl nahrazen dříve sadou vlastních obrázků.
Pokud chcete povolit upuštění, musíte zabránit výchozímu chování zrušením událostí dragenter i dragover, jako je toto:
const dropElement = document.querySelector("drop-target");dropElement.addEventListener("dragenter", (ev) => {
ev.preventDefault();
});
dropElement.addEventListener("dragover", (ev) => {
ev.preventDefault();
});
Pochopení rozhraní DragEvent
JavaScript obsahuje rozhraní DragEvent, které představuje interakci uživatele přetažením a přetažením. Níže je uveden seznam možných typů událostí v rozhraní DragEvent.
- drag: Uživatel spustí tuto událost při tažení prvku.
- dragend: Tato událost se spustí, když operace přetažení skončí nebo když ji uživatel přeruší. Typická operace přetažení může skončit uvolněním tlačítka myši nebo stisknutím klávesy Escape.
- dragenter: Přetažený prvek spustí tuto událost, když vstoupí do platného cíle upuštění.
- dragleave: Tato událost se spustí, když tažený prvek opustí cíl shození.
- dragover: Když uživatel přetáhne přetahovatelný prvek přes cíl přetažení, událost se spustí.
- dragstart: Událost se spustí na začátku operace přetažení.
- drop: Uživatel spustí tuto událost, když upustí prvek na cíl upuštění.
Při přetažení souboru do prohlížeče z prostředí mimo prohlížeč (například správce souborů operačního systému) prohlížeč nespustí události dragstart nebo dragend.
DragEvent se může hodit, pokud chcete odeslat vlastní událost přetažení programově. Pokud například chcete, aby div spouštěl vlastní události přetažení při načtení stránky, postupujte takto. Nejprve vytvořte novou vlastní DragEvent() takto:
const customDragStartEvent = new DragEvent('dragstart', {
dataTransfer: new DataTransfer(),
})const customDragEndEvent = new DragEvent('dragend');
Ve výše uvedeném bloku kódu customDragStartEvent představuje instanci DragEvent(). V customDragStartEvent jsou dva argumenty konstruktoru. První představuje typ události přetažení, což může být jeden ze sedmi typů událostí zmíněných dříve.
Druhým argumentem je objekt s klíčem dataTransfer představující instanci DataTransfer, o které se dozvíte více později v této příručce. Dále uchopte prvek, ze kterého chcete spustit událost, z modelu DOM (Document Object Model).
const draggableElement = document.querySelector("#draggable");
Pak přidejte, posluchači událostí takto:
draggableElement.addEventListener('dragstart', (event) => {
console.log('Drag started!');
event.dataTransfer.setData('text/plain', 'Hello, world!');
}); draggableElement.addEventListener('dragend', () => {
console.log('Drag ended!');
});
V prvním posluchači událostí výše funkce zpětného volání zaprotokoluje text „Přetažení zahájeno!“ a vyvolá metodu setData pro vlastnost dataTransfer na 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 most mezi zdrojovým prvkem (přetahovatelná položka) a cílovým prvkem (rozkládací oblast) během operace přetažení. Funguje jako dočasný úložný kontejner pro data, která chcete mezi těmito prvky sdílet.
Tato data mohou mít různé formy, jako je text, adresy URL nebo vlastní datové typy, což z nich činí všestranný nástroj pro implementaci široké škály funkcí přetahování.
Použití setData() ke sbalení dat
Chcete-li přenést data z přetahovatelného prvku do prvku s možností přetažení, použijete metodu setData() poskytovanou objektem dataTransfer. Tato metoda umožňuje zabalit data, která chcete přenést, a určit typ dat. Zde je základní příklad:
element.addEventListener('dragstart', (event) => {
event.dataTransfer.setData('text/plain', 'Hello, world!');
});
Když uživatel začne přetahovat zadaný prvek, setData() sbalí text „Ahoj, světe!“ s datovým typem text/plain. Tato data jsou nyní spojena s událostí přetažení a může k nim přistupovat cíl, který lze upustit během operace přetažení.
Načítání dat pomocí getData()
Na přijímací straně, v rámci posluchače událostí prvku s možností přetažení, můžete načíst přenesená data pomocí metody getData():
element.addEventListener('drop', (event) => {
const transferredData = event.dataTransfer.getData('text/plain');
console.log(`Received data: ${transferredData}`);
});
Výše uvedený blok kódu načte data se stejným datovým typem (text/plain), který byl nastaven pomocí metody setData() dříve. To vám umožňuje přistupovat k přenášeným datům a manipulovat s nimi podle potřeby v rámci kontextu rozbalitelného prvku.
Případy použití pro rozhraní Drag and Drop
Integrace funkcí přetahování do vašich webových aplikací může být silným vylepšením, ale je nezbytné pochopit, kdy a proč byste ji měli implementovat.
- Programy pro 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 přetažení 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é mohou ocenit 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í účinným způsobem, jak si uživatelé mohou přizpůsobit své řídicí panely přeskupením widgetů a grafů.
Mějte na paměti přístupnost
Přestože přetažení může být vizuálně přitažlivé a může zlepšit uživatelský dojem, je důležité zajistit, aby vaše implementace zůstala přístupná všem uživatelům, včetně těch s postižením. Poskytněte alternativní metody interakce, jako jsou ovládací prvky klávesnice, aby byla vaše aplikace inkluzivní.