Co to je Drag & Drop?
Drag and Drop (táhni a pusť) je interaktivní technika ovládání uživatelského rozhraní. Umožňuje uživateli uchopit vizuální prvek myší, přetáhnout ho a upustit na jiné cílové místo [3]. Hlavní myšlenkou je intuitivní manipulace s daty – v souladu s moderními principy tvorby uživatelského zážitku [2] namísto klikání na tlačítka nebo vyplňování formulářů uživatel přímo na obrazovce mění uspořádání objektů. Aplikace na základě této události automaticky provede příslušnou logiku v kódu (například přesun objektu z jedné kolekce List<> do druhé) [1].
V moderních webových aplikacích propojených s jazykem C# (jako je framework Blazor) [3] se Drag & Drop realizuje pomocí sady speciálních HTML5 událostí. Zápis <div @ondrop="ZpracujUpusteni"> říká kompilátoru: "Jakmile nad tímto prvkem uživatel uvolní tlačítko myši s taženým objektem, spusť metodu ZpracujUpusteni v C# kódu."
Základní atributy a události
Atribut draggable – HTML atribut, který musíme nastavit na hodnotu true, aby webový prohlížeč vůbec dovolil vizuální prvek uchopit myší [3]. Zapisujeme způsobem <div draggable="true">.
Událost ondragstart – událost, která se spustí v okamžiku, kdy uživatel začne prvek táhnout. Slouží k uložení informace o tom, co konkrétně přesouváme (např. si do dočasné proměnné uložíme ID taženého objektu) [1]. Zapisujeme způsobem @ondragstart="MetodaZacatekTazeni".
Událost ondragover – událost, která se volá neustále, zatímco se tažený prvek vznáší nad cílovou oblastí. Ve výchozím nastavení prohlížeče blokují upouštění prvků, proto musíme tuto událost zachytit a výchozí chování zrušit, aby se z oblasti stala platná cílová zóna [3]. Zapisujeme způsobem @ondragover:preventDefault="true".
Událost ondrop – událost, která nastane v momentě uvolnění tlačítka myši nad povolenou cílovou zónou. Slouží ke spuštění finální programové logiky – například k vyhledání objektu v původním seznamu, jeho odstranění metodou Remove() a přidání do nového seznamu metodou Add() [1]. Zapisujeme způsobem @ondrop="MetodaUpusteni".
