have drag and drop poc

This commit is contained in:
2023-07-12 20:10:05 -06:00
parent ccbeb5a013
commit a83d3ec2e7

View File

@@ -0,0 +1,42 @@
@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>