BlazorQ.DropZone 1.0.1

.NET 5.0
Install-Package BlazorQ.DropZone -Version 1.0.1
dotnet add package BlazorQ.DropZone --version 1.0.1
<PackageReference Include="BlazorQ.DropZone" Version="1.0.1" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add BlazorQ.DropZone --version 1.0.1
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: BlazorQ.DropZone, 1.0.1"
#r directive can be used in F# Interactive, C# scripting and .NET Interactive. Copy this into the interactive tool or source code of the script to reference the package.
// Install BlazorQ.DropZone as a Cake Addin
#addin nuget:?package=BlazorQ.DropZone&version=1.0.1

// Install BlazorQ.DropZone as a Cake Tool
#tool nuget:?package=BlazorQ.DropZone&version=1.0.1
The NuGet Team does not provide support for this client. Please contact its maintainers for support.

BlazorQ DropZone

Drag and drop component for Blazor

Install:

Install-Package BlazorQ.DropZone

Usage:
  1. Add BlazorDragDrop to your Startup.cs
services.AddBlazorDragDrop();
  1. Add BlazorQ.DragDrop to your _Imports.razor
@using BlazorQ.DragDrop
  1. 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(Cat droppedCat)
{
    int i = 0;
    foreach (var item in Cats)
       item.Order = ++i;
}

}
Product Versions
.NET net5.0 net5.0-windows net6.0 net6.0-android net6.0-ios net6.0-maccatalyst net6.0-macos net6.0-tvos net6.0-windows
Compatible target framework(s)
Additional computed target framework(s)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
1.0.1 969 11/20/2021