radzen drag and drop image

<style>
    .draggable {
      border: 1px solid #ccc;
      border-radius: 5px;
      margin: 1rem;
      padding: 1rem;
      display: inline-block;
      cursor: move;
    }

    .drop-target {
      border: 1px dashed #ebebeb;
      margin: 1rem;
      padding: 1rem;
      display: inline-block;
    }
</style>

<Draggable Data="@draggableDataA">
    <div class="draggable">
        Draggable A
    </div>
</Draggable>

<Draggable Data="@draggableDataB">
    <div class="draggable">
        Draggable B
    </div>
</Draggable>

<DropTarget T="String" Drop="@OnDrop">
    <div class="drop-target">
        Accepts Draggable A or B
    </div>
</DropTarget>

@if (dropMessage != null) {
    @dropMessage
}

<DropTarget T="String" Zone="DropZone">
    <div class="drop-target">
        Can't drop here
    </div>
</DropTarget>

@functions {
    string draggableDataA = "Draggable Data A";
    string draggableDataB = "Draggable Data B";

    string dropMessage = null;

    void OnDrop(string data)
    {
        dropMessage = $"Dropped: {data}";

        // Important: Invoke StateHasChanged() to update the page
        StateHasChanged();
    }
}