2

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?

0 Answers0