Drag and drop

<p class="visually-hidden" aria-live="assertive" data-drag-live
   data-drag-pickup="Picked up {item}. Arrow keys move it, Space drops it, Escape cancels."
   data-drag-move="{item}, position {position} of {count}."
   data-drag-drop="{item} dropped at position {position} of {count}."
   data-drag-cancel="Cancelled. {item} is back at position {position}."></p>
<p class="visually-hidden" id="release-steps-help">
    Press Space to pick up a step, the arrow keys to move it, and Space again to drop it.
</p>

<ol class="drag-list" data-drag-zone="release-steps" aria-label="Release steps" @onsedna-drop="Drop">
    @foreach (var step in _steps)
    {
        <li class="drag-item" @key="step.Id" data-drag-item="@step.Id" data-drag-label="@step.Title"
            aria-disabled="@(step.Locked ? "true" : null)">
            <button class="drag-handle" type="button" data-drag-handle
                    aria-label="Move @step.Title" aria-describedby="release-steps-help">
                <i class="@(step.Locked ? "ri-lock-2-line" : "ri-draggable")" aria-hidden="true"></i>
            </button>
            <span>@step.Title</span>
        </li>
    }
</ol>

@code {
    private sealed record Step(string Id, string Title, bool Locked = false);

    private readonly List<Step> _steps =
    [
        new("freeze", "Freeze deploys to orders-console-01", Locked: true),
        new("backup", "Back up src-db-14"),
        new("migrate", "Run the schema migration"),
        new("canary", "Route five percent of traffic to the canary"),
        new("promote", "Promote the release"),
    ];

    // The list is the app's. The script says which item went where; this moves it and the
    // render puts the rows in the new order. Index counts the list without the item.
    private void Drop(SednaDropEventArgs e)
    {
        var step = _steps.Find(s => s.Id == e.Item);
        if (step is null) return;
        _steps.Remove(step);
        _steps.Insert(Math.Min(e.Index, _steps.Count), step);
    }
}

<p class="visually-hidden" aria-live="assertive" data-drag-live
   data-drag-pickup="Picked up {item}. Up and down move it, left and right change lane, Space drops it."
   data-drag-move="{item}: {zone}, position {position} of {count}."
   data-drag-drop="{item} dropped in {zone} at position {position}."
   data-drag-cancel="Cancelled. {item} is back in {zone}."></p>

<div class="drag-board" @onsedna-drop="Drop">
    @foreach (var (id, title) in Lanes)
    {
        <section class="drag-lane" aria-labelledby="lane-@id">
            <h3 class="drag-lane-head" id="lane-@id">
                @title <span class="badge">@_lanes[id].Count</span>
            </h3>
            <ul class="drag-list" data-drag-zone="@id" data-drag-group="board" data-drag-label="@title">
                @foreach (var card in _lanes[id])
                {
                    <li class="drag-item" @key="card.Id" data-drag-item="@card.Id" data-drag-label="@card.Title"
                        tabindex="0" aria-disabled="@(card.Locked ? "true" : null)">
                        <span class="text-mono text-muted text-nowrap">@card.Id</span>
                        <span>@card.Title</span>
                    </li>
                }
                <li class="drag-empty">Nothing here. Drop a card to move it in.</li>
            </ul>
        </section>
    }
</div>

@code {
    private sealed record Card(string Id, string Title, bool Locked = false);

    private static readonly (string Id, string Title)[] Lanes =
    [
        ("queued", "Queued"),
        ("active", "In progress"),
        ("done", "Done"),
    ];

    private readonly Dictionary<string, List<Card>> _lanes = new()
    {
        ["queued"] =
        [
            new("ORD-4204", "Reserve stock for the spring range"),
            new("ORD-4209", "Confirm the courier pickup"),
            new("ORD-4187", "Refund the damaged delivery"),
        ],
        ["active"] =
        [
            new("ORD-4211", "Re-print the customs label"),
            new("ORD-4190", "Awaiting sign-off from finance", Locked: true),
        ],
        ["done"] = [],
    };

    // One handler on the board hears every lane, because the event bubbles from the zone it
    // landed in. From and To name the lanes; a reorder inside one lane has both the same.
    private void Drop(SednaDropEventArgs e)
    {
        var from = _lanes[e.From];
        var card = from.Find(c => c.Id == e.Item);
        if (card is null) return;

        from.Remove(card);
        var to = _lanes[e.To];
        to.Insert(Math.Min(e.Index, to.Count), card);
    }
}

<p class="visually-hidden" aria-live="assertive" data-drag-live
   data-drag-pickup="Picked up {item}. Arrow keys move it, Space drops it, Escape cancels."
   data-drag-move="{item}, tile {position} of {count}."
   data-drag-drop="{item} dropped at tile {position} of {count}."
   data-drag-cancel="Cancelled. {item} is back at tile {position}."></p>

<ul class="drag-grid" data-drag-zone="dashboard" data-drag-axis="grid" aria-label="Dashboard tiles"
    @onsedna-drop="Drop">
    @foreach (var tile in _tiles)
    {
        <li class="drag-item" @key="tile.Id" data-drag-item="@tile.Id" data-drag-label="@tile.Title" tabindex="0">
            <i class="@tile.Icon" aria-hidden="true"></i>
            <span>@tile.Title</span>
        </li>
    }
</ul>

@code {
    private sealed record Tile(string Id, string Title, string Icon);

    private readonly List<Tile> _tiles =
    [
        new("orders", "Orders", "ri-inbox-line"),
        new("revenue", "Revenue", "ri-line-chart-line"),
        new("share", "Channel share", "ri-pie-chart-line"),
        new("sites", "Sites", "ri-map-pin-line"),
        new("rota", "Rota", "ri-calendar-line"),
        new("team", "Team", "ri-team-line"),
        new("health", "Health", "ri-dashboard-line"),
    ];

    // data-drag-axis="grid" counts tiles in reading order, so Index is the same position
    // in this flat list whatever the column count at the reader's width.
    private void Drop(SednaDropEventArgs e)
    {
        var tile = _tiles.Find(t => t.Id == e.Item);
        if (tile is null) return;
        _tiles.Remove(tile);
        _tiles.Insert(Math.Min(e.Index, _tiles.Count), tile);
    }
}

<p class="visually-hidden" aria-live="assertive" data-drag-live
   data-drag-pickup="Picked up {items}. Arrow keys move, Space drops, Escape cancels."
   data-drag-move="{zone}, position {position} of {count}."
   data-drag-drop="{items} dropped in {zone} at position {position}."
   data-drag-cancel="Cancelled. Nothing moved."></p>

<div class="sedna-col sedna-gap-2" @onsedna-drop="Drop">
    @foreach (var (id, title) in Zones)
    {
        <section class="sedna-col sedna-gap-1" aria-labelledby="pick-@id">
            <h3 class="drag-lane-head" id="pick-@id">@title <span class="badge">@_zones[id].Count</span></h3>
            <ul class="file-grid" data-drag-zone="@id" data-drag-group="photos" data-drag-axis="grid"
                data-drag-label="@title" style="--drop-gap: var(--space-6)">
                @foreach (var photo in _zones[id])
                {
                    <li class="file-tile" @key="photo.Id" data-drag-item="@photo.Id" data-drag-label="@photo.Name" tabindex="0">
                        <label class="form-check file-tile-check">
                            <input type="checkbox" data-drag-select aria-label="Select @photo.Name"
                                   checked="@_picked.Contains(photo.Id)" @onchange="e => Toggle(photo.Id, e)" />
                        </label>
                        <span class="file-tile-thumb"><span class="file-icon file-icon--image"><i class="ri-image-line"></i></span></span>
                        <span class="file-name">@photo.Name</span>
                        <span class="file-meta"><span>@photo.Size</span></span>
                    </li>
                }
                <li class="drag-empty">Nothing here yet. Tick photos above and drag one of them in.</li>
            </ul>
        </section>
    }
</div>

@code {
    private sealed record Photo(string Id, string Name, string Size);

    private static readonly (string Id, string Title)[] Zones =
    [
        ("earlier", "From earlier issues"),
        ("issue", "In this issue"),
    ];

    private readonly Dictionary<string, List<Photo>> _zones = new()
    {
        ["earlier"] =
        [
            new("p1", "open-day-group.jpg", "4.1 MB"),
            new("p2", "new-racking-bay-4.jpg", "3.4 MB"),
            new("p3", "forklift-training.jpg", "2.2 MB"),
            new("p4", "crates-on-the-floor.jpg", "2.9 MB"),
            new("p5", "team-summer-lunch.jpg", "3.8 MB"),
        ],
        ["issue"] = [new("p6", "cover-autumn.jpg", "1.6 MB")],
    };

    private readonly HashSet<string> _picked = [];

    private void Toggle(string id, ChangeEventArgs e)
    {
        if (e.Value is true) _picked.Add(id);
        else _picked.Remove(id);
    }

    // Items is every photo carried: the ticked ones when the one taken hold of was ticked,
    // otherwise that one alone. Index counts the destination without any of them, so the
    // handler is still a remove and an insert — of a run instead of one.
    private void Drop(SednaDropEventArgs e)
    {
        var from = _zones[e.From];
        var to = _zones[e.To];
        var moving = e.Items.Select(id => from.Find(p => p.Id == id)).OfType<Photo>().ToList();
        foreach (var photo in moving) from.Remove(photo);
        to.InsertRange(Math.Min(e.Index, to.Count), moving);
        _picked.ExceptWith(e.Items);
    }
}

<p class="visually-hidden" aria-live="assertive" data-drag-live
   data-drag-pickup="Picked up {item}. Arrow keys move it, Space drops it, Escape cancels."
   data-drag-move="{item}: {zone}, position {position} of {count}."
   data-drag-drop="{item} dropped in {zone} at position {position}."
   data-drag-cancel="Cancelled. {item} is back in {zone}."></p>

<ul class="drag-list" data-drag-zone="stages" data-drag-group="plan" data-drag-accept="stage"
    data-drag-label="Stages" @onsedna-drop="Drop">
    @foreach (var stage in _stages)
    {
        <li class="card" @key="stage.Id" data-drag-item="@stage.Id" data-drag-type="stage" data-drag-label="@stage.Title">
            <div class="card-head">
                <div class="sedna-row">
                    <button class="drag-handle" type="button" data-drag-handle aria-label="Move stage @stage.Title">
                        <i class="ri-draggable" aria-hidden="true"></i>
                    </button>
                    <h3>@stage.Title</h3>
                </div>
                <span class="badge">@stage.Steps.Count</span>
            </div>
            <div class="card-body">
                <ul class="drag-list" data-drag-zone="@stage.Id" data-drag-group="plan" data-drag-accept="task"
                    data-drag-label="@stage.Title">
                    @foreach (var step in stage.Steps)
                    {
                        <li class="drag-item" @key="step.Id" data-drag-item="@step.Id" data-drag-type="task"
                            data-drag-label="@step.Title" tabindex="0">@step.Title</li>
                    }
                    <li class="drag-empty">No tasks in this stage.</li>
                </ul>
            </div>
        </li>
    }
</ul>

@code {
    private sealed record Step(string Id, string Title);
    private sealed record Stage(string Id, string Title, List<Step> Steps);

    private readonly List<Stage> _stages =
    [
        new("build", "Build", [new("compile", "Compile"), new("test", "Run the tests")]),
        new("ship", "Ship", [new("package", "Package"), new("sign", "Sign the package")]),
        new("verify", "Verify", []),
    ];

    // One zone of stages that takes only stages, and one zone of tasks per stage that takes
    // only tasks — all in one group, so a task moves between stages. A stage carried over a
    // task list is refused there and lands in the list of stages around it.
    private void Drop(SednaDropEventArgs e)
    {
        if (e.Type == "stage")
        {
            var stage = _stages.Find(s => s.Id == e.Item);
            if (stage is null) return;
            _stages.Remove(stage);
            _stages.Insert(Math.Min(e.Index, _stages.Count), stage);
            return;
        }

        var from = _stages.Find(s => s.Id == e.From)?.Steps;
        var to = _stages.Find(s => s.Id == e.To)?.Steps;
        var step = from?.Find(t => t.Id == e.Item);
        if (to is null || step is null) return;
        from!.Remove(step);
        to.Insert(Math.Min(e.Index, to.Count), step);
    }
}

<p class="visually-hidden" aria-live="assertive" data-drag-live
   data-drag-pickup="Picked up {item}. Arrow keys move it, Space drops it, Escape cancels."
   data-drag-move="{item}, position {position} of {count}."
   data-drag-drop="{item} dropped at position {position} of {count}."
   data-drag-cancel="Cancelled. {item} is back at position {position}."></p>

<div class="sedna-scroll sedna-scroll--sm">
    <ol class="drag-list" data-drag-zone="pick-queue" aria-label="Pick queue" @onsedna-drop="Drop">
        @foreach (var order in _orders)
        {
            <li class="drag-item" @key="order" data-drag-item="@order" tabindex="0">
                <span class="text-mono">@order</span>
            </li>
        }
    </ol>
</div>

@code {
    private readonly List<string> _orders = Enumerable.Range(4101, 30).Select(n => $"ORD-{n}").ToList();

    // Nothing here knows about scrolling: holding a dragged row near the top or bottom edge
    // of the .sedna-scroll scrolls it, and Index is counted where the list has scrolled to.
    private void Drop(SednaDropEventArgs e)
    {
        if (!_orders.Remove(e.Item)) return;
        _orders.Insert(Math.Min(e.Index, _orders.Count), e.Item);
    }
}

<div class="sedna-grid sedna-grid--sm sedna-grid--fit">
    <div class="sedna-col sedna-gap-2">
        <span class="form-label">Items</span>
        <ul class="drag-list">
            <li class="drag-item"><span>Whole row drags</span></li>
            <li class="drag-item">
                <span class="drag-handle" aria-hidden="true"><i class="ri-draggable"></i></span>
                <span>Drags from its handle</span>
            </li>
            <li class="drag-item" aria-disabled="true">
                <span class="drag-handle" aria-hidden="true"><i class="ri-lock-2-line"></i></span>
                <span>Cannot be moved</span>
            </li>
            <li class="drag-item" data-drop-edge="before"><span>The line: a drop lands above this row</span></li>
            <li class="drag-item" data-dragging="keyboard"><span>Picked up with Space</span></li>
            <li class="drag-item" data-dragging="pointer"><span>Carried by the pointer</span></li>
        </ul>
    </div>

    <div class="sedna-col sedna-gap-2">
        <span class="form-label">Zones</span>
        <ul class="drag-list" data-drop-state="valid">
            <li class="drag-item">Can take it</li>
        </ul>
        <ul class="drag-list" data-drop-state="valid" data-drop-over>
            <li class="drag-item">Can take it, and the pointer is over it</li>
        </ul>
        <ul class="drag-list" data-drop-state="invalid">
            <li class="drag-item">Refuses it</li>
        </ul>
        <ul class="drag-list" data-drop-state="invalid" data-drop-over>
            <li class="drag-item">Refuses it, and the pointer is over it</li>
        </ul>
        <ul class="drag-list" data-drag-zone="states-empty">
            <li class="drag-empty">Empty. Drop a card to move it in.</li>
        </ul>
    </div>
</div>