DragulaDropula 2.1.2

dotnet add package DragulaDropula --version 2.1.2
NuGet\Install-Package DragulaDropula -Version 2.1.2
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="DragulaDropula" Version="2.1.2" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add DragulaDropula --version 2.1.2
#r "nuget: DragulaDropula, 2.1.2"
#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 DragulaDropula as a Cake Addin
#addin nuget:?package=DragulaDropula&version=2.1.2

// Install DragulaDropula as a Cake Tool
#tool nuget:?package=DragulaDropula&version=2.1.2

DragulaDropula

Library for simple Drag-And-Drop functionality in Blazor.

You can pull request and create issue here 👉 https://github.com/marat0n/DragulaDropula

How to start using

  1. Add DragulaDropula namespace to _Imports.razor.
@using DragulaDropula
  1. Done ✅

API

Components

DraggingZone — Component you need to use as an underlay for Draggable components.

Parameters:

Width - width of DraggingZone.

Height - height of DraggingZone.

CssClass - the css class which will be set to root html-component in DraggingZone.


Draggable — Component you can drag

Parameters:

ItemToDrop - object you need to drop (Example below).

MustReturnBackOnDrop - boolean parameter means this component will return to start position when it's dropped.

OnDrop - if you need to run some logic when Draggable is dropped then put your method here.

OnDropWithPosition - the same as OnDrop but also set X and Y parameters when component dropped.

ChildContent - default child content.

ContentWhenDragging - child content will be rendered when user drags Draggable component.

StartX - if you need to set start X position for Draggable component.

StartY - if you need to set start Y position for Draggable component.

CssClass - the css class which will be set to root html-component in Draggable.

Bindings:

X - position on the X-axis.

Y - position on the Y-axis.


DropTarget — Component for creating dropping area

Parameters:

OnDrop - your method for getting dropped DraggableModel (and ItemToDrop inside) and something else you need.

ValidateItem - method for validating dropped item. If validation is successful then OnAccept will be invoked.

OnAccept - action will be invoked only if ValidateItem method returns true.

OnReject - action will be invoked only if ValidateItem method returns false.

CssClass - the css class which will be set to root html-component in DropTarget.

Classes

DraggingStateContainer — Class you need to create your own realization of DraggingZone or Draggable or DropTarget

Fields:

ModelDraggingNow - contains an Draggable component that moving right in the moment.

Events:

OnStartDragging - invoked when any Draggable start dragging.

OnMove - invoked when any Draggable moving.

OnDrop - invoked when user release the LMB (the mouseup html event) and drop any Draggable.

Exceptions

DraggingStateContainerIsNotSetException

Can be throwed if you'll use Draggable or DropTarget components without wrapping of DraggingZone.

Exception message:

DraggingStateContainer must be set.

Try wrap your Draggable and DropTarget components with DraggingZone.

And be sure their type parameters T are the same.

Example

Let's create a test page in blazor and use DragulaDropula here. Page Test.razor:

@page "/Test"

<DraggingZone T="CelestialObject" Height="50%" Width="100%">
    <div style="height: 600px">
        <Draggable T="CelestialObject"
                   MustReturnBackOnDrop="false" StartX="500" StartY="200"
                   ItemToDrop="@(new CelestialObject(CelestialObjectType.Star, "Sun"))">
            
            <div style="width:200px;height:200px;border-radius:50%;text-align:center;line-height:200px;background:yellow">
                Sun
            </div>

            <Draggable T="CelestialObject"
                       MustReturnBackOnDrop="false" StartX="-120" StartY="-10"
                       ItemToDrop="@(new CelestialObject(CelestialObjectType.Planet, "Earth"))">

                <div style="width:95px;height:95px;border-radius:50%;text-align:center;line-height:95px;background:blue">
                    Earth
                </div>

                <Draggable T="CelestialObject"
                           MustReturnBackOnDrop="false" StartX="-80" StartY="20"
                           ItemToDrop="@(new CelestialObject(CelestialObjectType.Satellite, "Moon"))">

                    <div style="width:50px;height:50px;border-radius:50%;text-align:center;line-height:50px;background:purple">
                        Moon
                    </div>
                </Draggable>
            </Draggable>

            <Draggable T="CelestialObject"
                       MustReturnBackOnDrop="false" StartX="350" StartY="110"
                       ItemToDrop="@(new CelestialObject(CelestialObjectType.Planet, "Mars"))">

                <div style="width:80px;height:80px;border-radius:50%;text-align:center;line-height:80px;background:brown">
                    Mars
                </div>
            </Draggable>
        </Draggable>
    </div>
                
    <DropTarget T="CelestialObject"
                ValidateItem="@(co => co is not null && co.Type == CelestialObjectType.Planet)"
                OnAccept="OnAccept"
                OnReject="OnReject">
        
        <div style="width: 300px; height: 300px; background: red;">
            Please drop a planet
        </div>
    </DropTarget>
</DraggingZone>

Message: @_message


@code {

    private enum CelestialObjectType {Planet, Star, Satellite}

    private record CelestialObject(CelestialObjectType Type, string Name);

    private string _message = string.Empty;

    private void OnAccept(CelestialObject? accepted)
    {
        _message = $"You dropped planet {accepted?.Name}!";
        StateHasChanged();
    }

    private void OnReject(CelestialObject? rejected)
    {
        _message = "It's not a planet...";
        StateHasChanged();
    }

}
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
2.1.2 207 6/4/2023
2.1.0 119 5/15/2023
2.0.0 263 2/3/2023
1.3.2 295 12/24/2022
1.3.0 413 9/26/2022
1.2.1 636 8/6/2022
1.2.0 415 8/2/2022
1.1.0 411 7/28/2022
1.0.2 409 7/24/2022
1.0.1 387 7/24/2022
1.0.0 386 7/22/2022