[bug] When moving one item, another moves with it (Blazor Server)

[nzdvis]

Describe the bug

I have two lists, one for rows and one for columns. When moving from column to row, and then back to column, another item moves with the first one.

It works fine when only running html and javascript.

The problem/bug seems to happen then I run StateHasChanged in Blazor, to update som of my other components.

But the weird part is, that I also run StateHasChanged when sorting, but then everything works fine.

Video of the problem: https://youtu.be/c-rBwSPlFRQ

(The flashing part in the video is when StateHasChanged runs, it makes some calculations and applies an overlay)

Expected behavior

Only the selected item should be moved.

Information

The environment is Blazor Server (dotnetcore 5)

sortablejs = 1.14.0

Code: JS

new Sortable(CERDimensions, {
    group: 'shared',
    animation: 150,
    dragClass: "dragPlaceholder-ce-item",
    ghostClass: "dragGhost-ce-item"
});

new Sortable(CECDimensions, {
    group: 'shared',
    animation: 150,
    dragClass: "dragPlaceholder-ce-item",
    ghostClass: "dragGhost-ce-item"
});

C#

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        var dotNetRef = DotNetObjectReference.Create(this);
        await _jsRunTime.InvokeVoidAsync("activateSortableJS", dotNetRef);
    }
    await base.OnAfterRenderAsync(firstRender);
}

[nzdvis]

I tried logging the CustomEvent.

Output from moving column to row:

Output from moving row back to column:

Seems like the item is the wrong one, but the clone is the right one? I don't know how or why. because it's moving the right and wrong item.

[ivanjx]

how are you rendering the list items? i also faced this weird bug when i tried to implement my own drag and drop and the problem was i did not use the @key attribute for each items

[owen-m1]

I don't know anything about Blazor, but it could be interfering with the native browser drag and drop API. Only advice I can give is to try the option forceFallback: true. This circumvents native D&D api.

[clamchoda]

I use this in blazer server and I don’t notice this problem. Are you sure that you are rebuilding the list items correctly when calling StateHasChanged? It looks like the ABC_ITEM item may be rebuilt as a child of OLDSALESPERSON instead of a sibling?

[mhbayan]

how are you rendering the list items? i also faced this weird bug when i tried to implement my own drag and drop and the problem was i did not use the @key attribute for each items

it's work tanks.

[nibsonline]

Did you resolve this? I've run into now with current versions of everything. I have the same bug with sortableJS or jqueryui sortable. I've given the container and the items id and @key attributes. I'm stuck!