Basic usage

Wrap anything in BOBDraggable and listen to OnDrag. Client coordinates are reported in DragEventArgs.

Drag me

<div style="position: relative; height: 180px; border: 1px dashed var(--palette-border); border-radius: .5rem; overflow: hidden;">
    <BOBDraggable OnDragStart="HandleBasicStart" OnDrag="HandleBasicDrag">
        <div style="@BasicBoxStyle">
            Drag me
        </div>
    </BOBDraggable>
</div>

Lifecycle events

Fires OnDragStart on mousedown, OnDrag continuously, and OnDragEnd on release.

Last event: (none) · Tick count: 0

<div>
    <BOBDraggable OnDragStart="@(_ => { _lastEvent = Loc["start"]; _dragTicks = 0; })"
                  OnDrag="@(_ => _dragTicks++)"
                  OnDragEnd="@(_ => _lastEvent = Loc["end"])">
        <BOBButton Text="Drag me and watch the counter" />
    </BOBDraggable>
    <p style="margin-top: 1rem;">
        Last event: <code>@_lastEvent</code> · Tick count: <code>@_dragTicks</code>
    </p>
</div>

Disabled

<BOBDraggable Disabled="true">
    <BOBButton Text="Locked — can't drag" />
</BOBDraggable>

Properties

Property	Type	Default	Description
`ChildContent`	`RenderFragment?`		Content rendered inside the component.
`OnDragStart`	`EventCallback<DragEventArgs>`		Raised when the DragStart event occurs.
`OnDrag`	`EventCallback<DragEventArgs>`		Raised when the Drag event occurs.
`OnDragEnd`	`EventCallback<DragEventArgs>`		Raised when the DragEnd event occurs.
`PreventDefault`	`bool`	`true`	PreventDefault.
`Disabled`	`bool`		When , the component is non-interactive.