BlazorQ.DropZone 1.0.1

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;
}

}

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 898 11/20/2021