mirror of
https://github.com/alexmickelson/canvasManagement.git
synced 2026-03-26 23:58:31 -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