Drag And Drop In Blazor Without JavaScript

@using DragNdrop2._0.Models;
<div class="job-status">
    <h3>@ListStatus (@Jobs.Count())</h3>
    <ul class="dropzone @dropClass"
        ondragover="event.preventDefault();"
        ondragstart="event.dataTransfer.setData('', event.target.id);"
        @ondrop="HandleDrop"
        @ondragenter="HandleDragEnter"
        @ondragleave="HandleDragLeave">
        @foreach (var job in Jobs)
        {
            <Job JobModel="job" />
        }
    </ul>
</div>
@code {
    [CascadingParameter] JobsContainer Container {
        get;
        set;
    }
    [Parameter] public JobStatuses ListStatus {
        get;
        set;
    }
    [Parameter] public JobStatuses[] AllowedStatuses {
        get;
        set;
    }
    List < JobModel > Jobs = new List < JobModel > ();
    string dropClass = "";
    protected override void OnParametersSet() {
        Jobs.Clear();
        Jobs.AddRange(Container.Jobs.Where(x => x.Status == ListStatus));
    }
    private void HandleDragEnter() {
        if (ListStatus == Container.Payload.Status) return;
        if (AllowedStatuses != null && !AllowedStatuses.Contains(Container.Payload.Status)) {
            dropClass = "no-drop";
        } else {
            dropClass = "can-drop";
        }
    }
    private void HandleDragLeave() {
        dropClass = "";
    }
    private async Task HandleDrop() {
        dropClass = "";
        if (AllowedStatuses != null && !AllowedStatuses.Contains(Container.Payload.Status)) return;
        await Container.UpdateJobAsync(ListStatus);
    }
}

Step 8

Select the Shared and right-click>> Add >> Razor Component, enter the name of the razor component as Job, and click on add button.

@using DragNdrop2._0.Models;
<li class="draggable" draggable="true" title="@JobModel.Description" @ondragstart="@(() => HandleDragStart(JobModel))">
    <p class="description">@JobModel.Description</p>
    <p class="last-updated"><small>Last Updated</small> @JobModel.LastUpdated.ToString("HH:mm.ss tt")</p>
</li>
@code {
    [CascadingParameter] JobsContainer Container {
        get;
        set;
    }
    [Parameter] public JobModel JobModel {
        get;
        set;
    }
    private void HandleDragStart(JobModel selectedJob) {
        Container.Payload = selectedJob;
    }
}

Step 9

I am using an Index.razor page which is provided by default in the server project.

@page "/"
@using DragNdrop2._0.Models;
<JobsContainer Jobs="Jobs" OnStatusUpdated="HandleStatusUpdated">
    <JobList ListStatus="JobStatuses.Todo" AllowedStatuses="@(new JobStatuses[] { JobStatuses.Started, JobStatuses.Progress})" />
    <JobList ListStatus="JobStatuses.Started" AllowedStatuses="@(new JobStatuses[] { JobStatuses.Todo})" />
    <JobList ListStatus="JobStatuses.Progress" AllowedStatuses="@(new JobStatuses[] { JobStatuses.Started})" />
    <JobList ListStatus="JobStatuses.Completed" AllowedStatuses="@(new JobStatuses[] { JobStatuses.Progress })" />
</JobsContainer>
<hr />
<p>Last updated job was: <strong>@lastUpdatedJob</strong></p>
<hr />
@foreach (var task in Jobs)
{
    <p>@task.Description - <strong>@task.Status</strong></p>
}
@code {
    List < JobModel > Jobs = new List < JobModel > ();
    string lastUpdatedJob = "";
    protected override void OnInitialized() {
        Jobs.Add(new JobModel {
            Id = 1, Description = " Creating Database", Status = JobStatuses.Todo, LastUpdated = DateTime.Now
        });
        Jobs.Add(new JobModel {
            Id = 2, Description = " Designing UI", Status = JobStatuses.Todo, LastUpdated = DateTime.Now
        });
        Jobs.Add(new JobModel {
            Id = 3, Description = " Data Binding", Status = JobStatuses.Todo, LastUpdated = DateTime.Now
        });
        Jobs.Add(new JobModel {
            Id = 4, Description = " Fix All Error", Status = JobStatuses.Todo, LastUpdated = DateTime.Now
        });
        Jobs.Add(new JobModel {
            Id = 5, Description = " Finish blog", Status = JobStatuses.Todo, LastUpdated = DateTime.Now
        });
    }
    void HandleStatusUpdated(JobModel updatedJob) {
        lastUpdatedJob = updatedJob.Description;
    }
}

Here I have used all components and models which a have created in our project and the result is here.

Output

Conclusion

I had a lot of fun using Blazor and exploring with drag and drop. As usual, I found that getting things up and running was quick and simple. I would definitely want to iterate on this code before implementing it in a real project, but I hope it provides folks with a solid starting point.