🦇 Building Drag & Drop in Blazor — Villain Edition

 

Blazor WebAssembly lets .NET developers build rich, interactive web apps entirely in C#.
To showcase its power, I built a fun demo where users can drag and drop “villains” between containers and reorder them in a list — all without a single line of JavaScript.

---

🎯 What You’ll See

This app demonstrates two kinds of drag-and-drop experiences:

1. Container Drag & Drop — Move items between “Available Villains” and “Active Threats.”

2. List Reordering — Reorder items by dragging them up or down.

Each shows how Blazor manages state, events, and dynamic UI updates in real time.

---

🧩 Project Setup

Tech stack:

• Blazor WebAssembly (.NET 9)

• C# 13

• Bootstrap 5 for responsive UI

• HTML5 drag & drop API

• No JavaScript required!

Key components:

• Home.razor – Container-based drag and drop

• VillainList.razor – Single-list reordering

• Villain.cs – Data model

• Scoped CSS for component-level styling

---

⚙️ Blazor Event Handling

Blazor supports native HTML5 drag events directly:

<div @ondragstart="(e) => HandleDragStart(villain)"
     @ondragover:preventDefault="true"
     @ondrop="(e) => HandleDrop('threats')">
    ...
</div>

🧠 Tip: The @ondragover:preventDefault="true" directive allows valid drop zones.

---

🏠 Container Drag & Drop (Home.razor)

1️⃣ Track the Drag Source

private void HandleDragStart(Villain villain)
{
    DraggedVillain = villain;
    DraggedFromContainer = AvailableVillains.Contains(villain) ? "available" : "threats";
}

2️⃣ Move the Item on Drop

private void HandleDrop(string targetContainer)
{
    if (DraggedVillain is null) return;

    if (DraggedFromContainer == "available" && targetContainer == "threats")
    {
        AvailableVillains.Remove(DraggedVillain);
        ThreatVillains.Add(DraggedVillain);
    }
    else if (DraggedFromContainer == "threats" && targetContainer == "available")
    {
        ThreatVillains.Remove(DraggedVillain);
        AvailableVillains.Add(DraggedVillain);
    }

    DraggedVillain = null;
    StateHasChanged();
}

✅ Blazor automatically re-renders the UI, keeping everything in sync.

---

📋 List Reordering (VillainList.razor)

1️⃣ Identify Dragged Index

private int draggedIndex = -1;

private void OnDragStart(int index)
{
    draggedIndex = index;
}

2️⃣ Drop & Reinsert

private void OnDrop(int index)
{
    if (draggedIndex != -1 && draggedIndex != index)
    {
        var draggedVillain = villains[draggedIndex];
        villains.RemoveAt(draggedIndex);

        var targetIndex = draggedIndex < index ? index - 1 : index;
        villains.Insert(targetIndex, draggedVillain);
        StateHasChanged();
    }
}

Smooth animations come from simple CSS transitions — no JS animation libraries needed.

---

💡 What Makes It Pure Blazor

Blazor handles all DOM events directly in C#:

• @ondragstart, @ondrop, @ondragover, @ondragleave

• Real-time rendering via StateHasChanged()

• Dynamic binding with List<T> collections

No interop, no scripts — just .NET all the way through.

---

🎨 Visual Touches

Scoped CSS provides:

• Highlighted drop targets

• Faded, dragged items (opacity: 0.5)

• Smooth transitions

• Empty-state messaging

---

🧠 Takeaways

This project proves that Blazor can handle interactive front-end experiences natively:

• True C#-only drag & drop

• Reactive UI updates

• Clean, component-scoped code

If you love .NET but hate switching to JS, this pattern is for you.

---

🦇 Try It Yourself

• / → Container drag & drop

• /villainList → Reordering demo

[source code]