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

SbDropZone

A designated area that accepts dragged items. Provides visual feedback during drag operations and can filter acceptable item types.

Parameters

Parameter	Type	Default	Description
PlaceholderText	string	"Drag items here"	Text shown when zone is empty
DropText	string	"Drop here"	Text shown during drag over
AcceptedTypes	string[]?	null	Array of accepted item types (null accepts all)
Disabled	bool	false	Whether the zone accepts drops
Class	string?	null	Additional CSS classes

Events

Event	Type	Description
OnItemDropped	EventCallback	Fired when item is dropped
OnDragEnter	EventCallback	Fired when drag enters zone
OnDragExit	EventCallback	Fired when drag leaves zone

Templates / Slots

Slot	Type	Description
ChildContent	RenderFragment?	Content to show inside the zone

SbDropEventArgs Class

Property	Type	Description
ClientX	double	X coordinate of drop
ClientY	double	Y coordinate of drop
Data	object?	Dropped data

CSS Classes

• sb-dropzone - Base class
• sb-dropzone--drag-over - Item is being dragged over
• sb-dropzone--disabled - Disabled state
• sb-dropzone__indicator - Drop indicator
• sb-dropzone__placeholder - Empty placeholder
• sb-dropzone__icon - Icon element
• sb-dropzone__text - Text element

Examples

Basic Drop Zone

<SbDropZone OnItemDropped="HandleDrop" />

@code {
    private void HandleDrop(SbDropEventArgs args)
    {
        Console.WriteLine($"Dropped at ({args.ClientX}, {args.ClientY})");
    }
}

With Custom Placeholder

<SbDropZone PlaceholderText="Drop components here"
            DropText="Release to add"
            OnItemDropped="HandleDrop" />

With Type Filtering

<SbDropZone AcceptedTypes="@(new[] { "widget", "component" })"
            PlaceholderText="Drop widgets or components here"
            OnItemDropped="HandleDrop" />

With Content

<SbDropZone OnItemDropped="HandleDrop">
    @if (droppedItems.Any())
    {
        @foreach (var item in droppedItems)
        {
            <div class="dropped-item">@item.Name</div>
        }
    }
</SbDropZone>

Page Builder Canvas

<div class="page-builder">
    <aside class="toolbox">
        <SbDraggableItem Data="@textBlock" ItemType="block">
            <div class="tool">📝 Text</div>
        </SbDraggableItem>
        <SbDraggableItem Data="@imageBlock" ItemType="block">
            <div class="tool">🖼️ Image</div>
        </SbDraggableItem>
    </aside>
    
    <main class="canvas">
        <SbDropZone AcceptedTypes="@(new[] { "block" })"
                    PlaceholderText="Drag blocks to build your page"
                    DropText="Drop to add block"
                    OnItemDropped="AddBlock"
                    OnDragEnter="ShowDropGuide"
                    OnDragExit="HideDropGuide">
            @foreach (var block in pageBlocks)
            {
                <div class="page-block">
                    @block.Content
                </div>
            }
        </SbDropZone>
    </main>
</div>

@code {
    private List<Block> pageBlocks = new();
    
    private void AddBlock(SbDropEventArgs args)
    {
        if (args.Data is Block block)
        {
            pageBlocks.Add(block);
        }
    }
}

Multiple Drop Zones

<div class="kanban-board">
    @foreach (var column in columns)
    {
        <div class="kanban-column">
            <h3>@column.Title</h3>
            <SbDropZone AcceptedTypes="@(new[] { "task" })"
                        OnItemDropped="e => MoveTask(e, column.Id)"
                        PlaceholderText="Drop tasks here">
                @foreach (var task in column.Tasks)
                {
                    <SbDraggableItem Data="@task" ItemType="task">
                        <div class="task-card">@task.Title</div>
                    </SbDraggableItem>
                }
            </SbDropZone>
        </div>
    }
</div>

Disabled Drop Zone

<SbDropZone Disabled="@isReadOnly"
            PlaceholderText="@(isReadOnly ? "Read-only mode" : "Drop items here")"
            OnItemDropped="HandleDrop" />