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