canvasManagement/Management.Web/Pages/Drag.razor

@page "/drag"
@inject IJSRuntime JSRuntime

@code {
  private string dragClass = "bg-light";

  void OnDragStart()
  {
      Console.WriteLine("on drag start");
  }

  async Task OnDrop()
  {
    Console.WriteLine("on drop");
    dragClass="bg-light";
  }

  async Task OnDragEnter() {
    dragClass="bg-dark";
  }
  async Task OnDragLeave() {
    dragClass="bg-light";
  }
}

<div draggable="true"
  @ondragstart="OnDragStart"
>
  Drag me!
</div>

<div 
  @ondrop="@(() => OnDrop())"
  @ondragenter="OnDragEnter"
  @ondragleave="OnDragLeave"
  ondragover="event.preventDefault();"
  ondragstart="event.dataTransfer.setData('', event.target.id);"
       
  style="width: 100px;height: 100px;"
  class="@dragClass"
  >   
    Drop here!
</div>