I am trying to obtain the dragged element in order to modify it while is dragged.
More specifically, I have a list in the following format:
List<(int, string)> list_item = new List<(int, string)> { (0, "item 1"), (1, "item 2"), (2, "item 3"), (3, "item 4") };
and for each element of the list a draggable div is created:
@foreach (var item in list_item)
{
<div id="@item.Item2" style="width: 300px; height:100px; border: 1px solid #000000;"
ondragover="event.preventDefault();"
draggable="true"
@ondragstart="@(() => HandleDragStart(item))"
@ondrop="@(() => HandleDrop(item))">
<h1>@item.Item2</h1>
</div>
}
The HandleDragStart(item)
function saves the dragged element in a global variable; the HandleDrop(item)
function reorders the elements based on the movements of the user.
My goal is to change the opacity of the dragged object while is dragged (the item that I see near the cursor during the movement). Is it possible to do that?