BlazorQ.DropZone

BlazorQ DropZone

Drag and drop component for Blazor

Install:

Install-Package BlazorQ.DropZone

Usage:

• Add BlazorDragDrop to your Startup.cs

services.AddBlazorDragDrop();

• Add BlazorQ.DragDrop to your _Imports.razor

@using BlazorQ.DragDrop

• Add drag & drop styles to your app from dragdrop.css.

Create a DropZone for your items

You have to create a dropzone and assign your items to it:

    <DropZone Items="MyTasks">
        <div>@context.Name</div>
    </DropZone>

A single DropZone makes sense, because the default value of CanReorder is true. So you can drag & drop items inside the only zone.

Usually you have at least two DropZones with items of the same or different type.

You can drag & drop items among DropZones with items of the same type, in other cases you need to specify Accepts like in the following example:

    <DropZone Items="Cats" ItemWrapperClass="@((item) => "cat")" Accepts="NewCat" OnItemDrop="SaveCatsOrder">
        <div>@context.Name</div>
        <img src="@($"api/data/photos?fileName={context.Photo}")" style="margin: 10px; width: 100px;" />
    </DropZone>

    <DropZone Items="Dogs" ItemWrapperClass="@((item) => "dog")" Accepts="NewDog">
        <div>@context.Name</div>
        <img src="@($"api/data/photos?fileName={context.Photo}")" style="margin: 10px; width: 100px;" />
    </DropZone>

    <DropZone Items="Photos" Context="fileName" CanReorder="false" Accepts="RestorePhoto">
        <img src="@($"api/data/photos?fileName={fileName}")" style="margin: 10px; width: 100px;" />
    </DropZone>

@code {
private Cat NewCat(object source, object target)
{
    if (source is string fileName)
        return new Cat()
        {
            Id = Guid.NewGuid(),
            Photo = fileName
        };
    else
       return null;
}

private Dog NewDog(object source, object target)
{
    if (source is string fileName)
        return new Dog()
        {
            Id = Guid.NewGuid(),
            Photo = fileName
        };
    else
       return null;
}

private string RestorePhoto(object source, object target)
{
    if (source is Cat)
        return ((Cat)source).Photo
    else if (source is Dog)
        return ((Dog)source).Photo
       return null;
}

private void SaveCatsOrder(DragDropArgs<Cat> args)
{
    int i = 0;
    foreach (var item in Cats)
       item.Order = ++i;
}

}