mirror of
https://github.com/alexmickelson/canvasManagement.git
synced 2026-03-25 23:28:33 -06:00
have drag and drop poc
This commit is contained in:
42
Management.Web/Pages/Drag.razor
Normal file
42
Management.Web/Pages/Drag.razor
Normal 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>
|
||||
Reference in New Issue
Block a user