BlazorQ.DropZone 1.0.3

dotnet add package BlazorQ.DropZone --version 1.0.3
NuGet\Install-Package BlazorQ.DropZone -Version 1.0.3
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="BlazorQ.DropZone" Version="1.0.3" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add BlazorQ.DropZone --version 1.0.3
#r "nuget: BlazorQ.DropZone, 1.0.3"
#r directive can be used in F# Interactive and Polyglot Notebooks. 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.3

// Install BlazorQ.DropZone as a Cake Tool
#tool nuget:?package=BlazorQ.DropZone&version=1.0.3

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(DragDropArgs<Cat> args)
{
    int i = 0;
    foreach (var item in Cats)
       item.Order = ++i;
}

}
Product Compatible and additional computed target framework versions.
.NET net6.0 is compatible.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
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.3 2,485 11/12/2022