1. Zadání

Co je cílem zadání?

  • Vytvoření datové třídy Úkol, která obsahuje vlastnost pro uložení názvu.
  • Inicializace dvou oddělených kolekcí pro sledování stavu úkolů a vytvoření pomocné proměnné pro uchování právě taženého prvku.
  • Příprava uživatelského rozhraní se dvěma vizuálně odlišenými oblastmi, které fungují jako aktivní zóny pro vkládání položek.
  • Implementace interaktivity pomocí událostí Drag & Drop umožňující uživateli myší chytit, táhnout a upustit jednotlivé prvky na obrazovce.

Zadání

Nejprve definujte třídu Ukol, která bude reprezentovat konkrétní pracovní úkol a bude obsahovat textovou vlastnost Nazev.

V Razor komponentě si připravte dvě nezávislé kolekce List<Ukol> pro sloupce „K vyřízení“ a „Hotovo“ a k tomu jednu privátní proměnnou pro dočasné uchování právě přenášeného objektu. První kolekci rovnou naplňte alespoň třemi výchozími úkoly, druhou ponechte prázdnou.

Vytvořte uživatelské rozhraní se dvěma vizuálně oddělenými zónami a vypište do nich úkoly s aktivním atributem draggable="true". Pomocí událostí @ondragstart, ondragover (s potlačením výchozího chování) a @ondrop naprogramujte logiku pro obousměrné přesouvání myší. Samotný přesun realizujte přidáním objektu do cílové kolekce a jeho současným smazáním z té původní.

Příklad, jak by mohla stránka vypadat:

Pokud se okno nenačetlo, klikněte zde.