Úkol Drag and Drop

1. Zadání

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

2. Grafická nápověda

Logika aplikace

Po uchopení se objekt uloží do pomocné proměnné tahanyPrvek. Následně se vyhodnocuje podmínka, zda uživatel prvek pustil nad platným cílem.

Pokud prvek skončí mimo cíl, operace se bez změny dat ukončí. Při úspěšném umístění do cílové oblasti se objekt nejprve odstraní z původní kolekce zavoláním metody Remove() a vzápětí se vloží do nového seznamu pomocí metody Add(). Proces je zakončen resetováním proměnné tahanyPrvek na hodnotu null, čímž se paměť vyčistí pro další operaci.

3. Řešení úkolu

Třída úkol

namespace DragAndDrop3.Models
{
    // Třída úkol, obsahuje pouze název
    public class Ukol
    {
        public string Nazev { get; set; } = "";
    }
}

Třída Úkol definuje jedinou vlastnost - Název. 

Razor komponenta

@page "/"
 
<h3>Seznam úkolů</h3>
 
<div class="container d-flex gap-4">
    <!-- Seznam úkolů k vyřízení, povolené dragover a v momentě upuštění zavolá metodu VlozitDoVyrizeni() -->
    <div class="drop-zone" ondragover="event.preventDefault();" @ondrop="VlozitDoVyrizeni">
 
        <h4>K vyřízení</h4>
 
        <!-- Výpis všech úkolů, které ještě nejsou zpracovány -->
        @foreach (var ukol in ukolyKeZpracovani)
        {
            <!-- Povolení draggable, volání funkce ZahajitPresun() -->
            <div class="draggable-item" draggable="true" @ondragstart="() => ZahajitPresun(ukol)">
                @ukol.Nazev
            </div>
        }
    </div>
 
    <!-- Seznam hotových úkolů, povolené dragover a v momentě upuštění zavolá metodu VlozitDoHotovo() -->
    <div class="drop-zone" ondragover="event.preventDefault();" @ondrop="VlozitDoHotovo">
 
        <h4>Hotovo</h4>
 
        <!-- Výpis všech úkolů, které jsou v seznamu hotovo -->
        @foreach (var ukol in hotoveUkoly)
        {
            <!-- Povolení draggable, volání funkce ZahajitPresun() -->
            <div class="draggable-item" draggable="true" @ondragstart="() => ZahajitPresun(ukol)">
                @ukol.Nazev
            <div>
        }
    </div>
</div>
 
<style>
    /* CSS styl cílové oblasti pro upuštění prvků */
    .drop-zone {
        width: 300px;
        min-height: 400px;
        border: 2px dashed #ccc;
        padding: 20px;
        background-color: #f9f9f9;
    }
    .draggable-item {
        padding: 10px;
        margin-bottom: 10px;
        background-color: #007bff;
        color: white;
        cursor: grab;
        border-radius: 5px;
    }
</style>
 
@code {
    // Kolekce pro oba sloupce (sjednoceno na Models.Ukol)
    List<Models.Ukol> ukolyKeZpracovani = new List<Models.Ukol>
    {
        new Models.Ukol { Nazev = "Napsat mail" },
        new Models.Ukol { Nazev = "Nakoupit" },
        new Models.Ukol { Nazev = "Uklidit" },
        new Models.Ukol { Nazev = "Vyvenčit psa" }
    };
 
    List<Models.Ukol> hotoveUkoly = new List<Models.Ukol>();
 
    // Pomocná proměnná pro právě přenášený objekt (nullable a privátní)
    private Models.Ukol? prenasenyUkol;
 
    // Metoda volaná při začátku tažení (@ondragstart)
    void ZahajitPresun(Models.Ukol ukol)
    {
        prenasenyUkol = ukol;
    }
 
    // Metoda volaná při upuštění do "Hotovo" (@ondrop)
    void VlozitDoHotovo()
    {
        // Ochrana proti null
        if (prenasenyUkol != null && !hotoveUkoly.Contains(prenasenyUkol))
        {
            hotoveUkoly.Add(prenasenyUkol);
            ukolyKeZpracovani.Remove(prenasenyUkol);
            prenasenyUkol = null; // Reset
        }
    }
 
    // Metoda volaná při upuštění zpět do "K vyřízení" (@ondrop)
    void VlozitDoVyrizeni()
    {
        if (prenasenyUkol != null && !ukolyKeZpracovani.Contains(prenasenyUkol))
        {
            ukolyKeZpracovani.Add(prenasenyUkol);
            hotoveUkoly.Remove(prenasenyUkol);
            prenasenyUkol = null; // Reset
        }
    }
}

Atributem draggable="true" určujeme, že prvek HTML lze přesouvat, přičemž událost @ondragstart pomocí lambda výrazu () => ZahajitPresun(ukol) okamžitě ukládá instanci právě taženého úkolu do privátní proměnné prenasenyUkol. U cílových oblastí je pak nezbytné volat ondragover="event.preventDefault();", čímž se potlačí výchozí chování prohlížeče, které by jinak upuštění prvku zablokovalo. Jakmile uživatel prvek pustí, událost @ondrop zavolá příslušnou C# metodu (např. VlozitDoHotovo). V bloku @code tyto metody nejprve bezpečně ověří přítomnost objektu v dočasné proměnné a následně pomocí standardních metod Add a Remove na kolekcích List<Models.Ukol> zajistí přesun dat. Po vyresetování proměnné na null se Blazor automaticky postará o překreslení celého uživatelského rozhraní podle aktuálního stavu obou seznamů.