Wrong item order during (faster) dragging inside one dropzone

[AndreZinner]

I recently noticed in my Serverside blazor project, that the visual order of items gets corrupted when I drag a item multiple times up and down WITHOUT releasing the mouse button.

I can reproduce the error in the sample app when i change your code in index.razor to:

 <div id="main" class="container-fluid">
    <p>Drag the list items:</p>
    <ul>
        <Dropzone>
            <Draggable>
                <li class="list-group-item" >A (order-pos: @context.OrderPosition)</li>
            </Draggable>
            <Draggable>
                <li class="list-group-item" >B (order-pos: @context.OrderPosition)</li>
            </Draggable>
            <Draggable>
                <li class="list-group-item" >C (order-pos: @context.OrderPosition)</li>
            </Draggable>
            <Draggable>
                <li class="list-group-item" >D (order-pos: @context.OrderPosition)</li>
            </Draggable>
            <Draggable>
                <li class="list-group-item" >E (order-pos: @context.OrderPosition)</li>
            </Draggable>
            <Draggable>
                <li class="list-group-item" >F (order-pos: @context.OrderPosition)</li>
            </Draggable>
            <Draggable>
                <li class="list-group-item" >G (order-pos: @context.OrderPosition)</li>
            </Draggable>
        </Dropzone>
    </ul>
</div>

If you click and hold on item "A" and move it down to the "G" and again up to "B" and repeat this several times (faster) you may notice, that the order of some items may have changed although you did not "release" your item and all other items should stay in the correct order.

Maybe its a blazor rendering / update issue ...

If I drag slowly I am not able reproduce the effect.

[Postlagerkarte]

Hi @AndreZinner , thank you for letting me know about it. I think this might be due to mouse events not raised for every pixel and the list reordering is based upon drag-enter and drag-leave events which rely upon mouse events.

[AndreZinner]

I guessed it would be something like that. Sounds like its not that easy to fix. But this is of course essential, because you corrupt your list order … Regards Andre Zinner

[bancroftway]

I have a reproduction for this issue here. Note: branch name is 'wrongordering'.

A few points to note:

1. My OrderDto class which is being bound to Draggable has "RowNumber" property.
2. Inside the DropZone, I loop through a sorted list of Orders, ordered by RowNumber:
   @foreach (var order in this.Orders.OrderBy(x => x.RowNumber))
3. After a Drop event, I remove the dragged order from the list, and insert it into the new position, so that the underlying list matches the front-end.
4. I then re-calculate the RowNumber of every single row.
5. When there is smaller number of items in Orders list, this issue is hard to reproduce. To reproduce this problem, either the number of items in the list should be larger, or the bound class is "heavy" ie it has many children and grandchildren. In my real work project where I am currently hitting this issue, this problem occurs with even 10 rows, because the object I am binding to Draggable tag has a few other attached properties and collections of objects.

Steps to reproduce:

1. In the project referenced above, select a customer from Customers dropdown
2. Go to the middle of the Orders list, like around Order# 250.
3. Grab a row and rapidly drop it a few rows above or below.
4. Note that the ordering of some of the rows in the vicinity gets disturbed
5. Also note that if instead of 500 Orders, we limit the Orders per customer to something like 5 or 10, this issue becomes harder to reproduce.

Here is a screenshot of the issue, where I dragged row #250, and dropped it after row 246. But for an unknown reason, row 247 got disturbed. Also, because I recalculate the row number of every row, and I am bound to a list of Orders ordered by RowNumber, the final ordering of items is incorrect.

[Postlagerkarte]

Thank you @bancroftway for the detailed repro case. I already did some research after the inital report from @AndreZinner and it seems that there is nothing I can do about the problem.
The approach taken by this library is conditional rendering of captured fragments. This works fine for small sets but with larger sets it lacks perfomance and this causes troubles. When the Blazor Team implements dotnet/aspnetcore#18754 I am creating a v2.0 of the library.