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

Posted by: Guest on August-01-2020

Source

Code answers related to "radzen drag and drop image"

Code answers related to "Whatever"

Browse Popular Code Answers by Language

Answers for "radzen drag and drop image"

Code answers related to "radzen drag and drop image"

Code answers related to "Whatever"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us