sufi-blazor/docs/components/builder/SbDraggableItem.md

SbDraggableItem

A wrapper component that makes its content draggable via HTML5 drag and drop. Used in visual builders for drag-and-drop interfaces.

Parameters

Parameter	Type	Default	Description
Data	object?	null	Data to transfer during drag operation
ItemType	string?	null	Type identifier for filtering drop targets
Disabled	bool	false	Whether dragging is disabled
Class	string?	null	Additional CSS classes

Events

Event	Type	Description
OnDragStarted	EventCallback	Fired when drag begins
OnDragEnded	EventCallback	Fired when drag ends

Templates / Slots

Slot	Type	Description
ChildContent	RenderFragment?	Content to make draggable

SbDragStartEventArgs Class

Property	Type	Description
Data	object?	The data being dragged
ItemType	string?	The item type identifier

CSS Classes

• sb-draggable-item - Base class
• sb-draggable-item--dragging - Applied during drag
• sb-draggable-item--disabled - Disabled state

Examples

Basic Draggable Item

<SbDraggableItem Data="@item" OnDragStarted="HandleDragStart">
    <div class="my-item">
        Drag me!
    </div>
</SbDraggableItem>

@code {
    private object item = new { Id = 1, Name = "Item 1" };
    
    private void HandleDragStart(SbDragStartEventArgs args)
    {
        Console.WriteLine($"Dragging: {args.Data}");
    }
}

With Item Type

<SbDraggableItem Data="@widget" ItemType="widget" OnDragStarted="HandleDragStart">
    <div class="widget-card">
        <SbIcon Name="grid" />
        <span>Widget</span>
    </div>
</SbDraggableItem>

Palette of Draggable Components

<div class="component-palette">
    @foreach (var component in availableComponents)
    {
        <SbDraggableItem Data="@component" 
                         ItemType="@component.Type"
                         OnDragStarted="HandleDragStart"
                         OnDragEnded="HandleDragEnd">
            <div class="palette-item">
                <SbIcon Name="@component.Icon" />
                <span>@component.Name</span>
            </div>
        </SbDraggableItem>
    }
</div>

@code {
    private List<ComponentInfo> availableComponents = new()
    {
        new() { Type = "button", Name = "Button", Icon = "square" },
        new() { Type = "text", Name = "Text", Icon = "type" },
        new() { Type = "image", Name = "Image", Icon = "image" }
    };
    
    private ComponentInfo? draggedComponent;
    
    private void HandleDragStart(SbDragStartEventArgs args)
    {
        draggedComponent = args.Data as ComponentInfo;
    }
    
    private void HandleDragEnd()
    {
        draggedComponent = null;
    }
}

Disabled State

<SbDraggableItem Data="@item" Disabled="@isLocked">
    <div class="locked-item">
        @if (isLocked)
        {
            <SbIcon Name="lock" />
        }
        Item Content
    </div>
</SbDraggableItem>

Combined with SbDropZone

<div class="builder-layout">
    <div class="toolbox">
        <SbDraggableItem Data="@textBlock" ItemType="block">
            <div class="tool">Text Block</div>
        </SbDraggableItem>
        <SbDraggableItem Data="@imageBlock" ItemType="block">
            <div class="tool">Image Block</div>
        </SbDraggableItem>
    </div>
    
    <SbDropZone AcceptedTypes="@(new[] { "block" })"
                OnItemDropped="HandleDrop"
                PlaceholderText="Drag blocks here">
        @foreach (var block in pageBlocks)
        {
            <div class="placed-block">@block.Name</div>
        }
    </SbDropZone>
</div>