DragulaDropula

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

Nuget Package here 👉 https://www.nuget.org/packages/DragulaDropula

How to start using

1. Add DragulaDropula namespace to _Imports.razor.

@using DragulaDropula

2. 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();
    }

}