javascript - sortablejs 在第二次 dragStart 上更改顺序

Question

所以我添加了sortablejs给我的blazor应用程序，它的工作原理 - 第一次拖放。
首先，这是发生了什么:

Blazor 组件代码:

<ul class="ulManufacturers">
    @foreach (var m in manufacturers)
    {
        var mGrayedOut = m.Visible ? "" : "grayout";
        var toggleButtonImg = showManufacturerBikes[m] ? "up" : "down";
        var toggleButtonTitle = showManufacturerBikes[m] ? $"Sakrij {m.Nickname} motore" : $"Prikaži {m.Nickname} motore";
        <li data-id="@m.Id">
            <div class="divManufacturerHeader">
                <div class="buttons">
                    <img class="zoom-on-hover cursor-grab fit-image grayout drag-handle"
                         src="/lib/bootstrap-icons-1.5.0/list.svg"
                         data-toggle="tooltip" data-placement="top"
                         title="Uhvati i premesti"/>

                    <img class="zoom-on-hover cursor-pointer fit-image grayout"
                         src="/lib/bootstrap-icons-1.5.0/plus-circle.svg"
                         data-toggle="tooltip" data-placement="top"
                         title="Dodaj novi @m.Nickname motor"
                         @onclick="()=>AddBike(m)" />

                    <img class="zoom-on-hover cursor-pointer fit-image grayout"
                         src="/lib/bootstrap-icons-1.5.0/arrow-@(toggleButtonImg)-circle.svg"
                         data-toggle="tooltip" data-placement="top"
                         title="@toggleButtonTitle"
                         @onclick="()=>ToggleBikes(m)" />
                </div>
                <div class="divLogoOrName">
                    @if (string.IsNullOrEmpty(m.LogoUrl))
                    {
                        <h1 class="zoom-on-hover cursor-pointer @mGrayedOut"
                            @onclick="()=>SelectManufacturer(m)">
                            @m.Nickname
                        </h1>
                    }
                    else
                    {
                        <img class="zoom-on-hover cursor-pointer fit-image imgManufacturerLogo @mGrayedOut"
                             src="@m.LogoUrl"
                             @onclick="()=>SelectManufacturer(m)" />
                    }
                </div>
            </div>
            <div class="divBikeThumbnailsContainer sortable-list @(showManufacturerBikes[m] ? "" : "hidden")">
                @foreach (var b in m.Bikes)
                {
                    var bGrayedOut = b.Visible ? string.Empty : "grayout";
                    <div class="sortable-list-grid-item drag-handle @bGrayedOut" @onclick="() => SelectBike(b)">
                        <img class="zoom-on-hover cursor-grab fit-image grayout"
                             src="/lib/bootstrap-icons-1.5.0/list.svg"
                             data-toggle="tooltip" data-placement="top"
                             title="Uhvati i premesti" />
                        <BikeThumbnailPage Bike="b" />
                    </div>
                }
            </div>
        </li>
    }

    @if (showButtonAddManufacturer)
    {
        <li>
            <div class="divManufacturerHeader">
                <img class="zoom-on-hover cursor-pointer fit-image grayout"
                     src="/lib/bootstrap-icons-1.5.0/plus-circle.svg"
                     data-toggle="tooltip" data-placement="top"
                     title="Dodaj novog proizvodjača"
                     @onclick="AddManufacturer" />
            </div>
        </li>
    }
</ul>

@code {

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var objRef = DotNetObjectReference.Create(this);
            await jsRuntime.InvokeVoidAsync("EnableManufacturerSorting", objRef);
        }

        await base.OnAfterRenderAsync(firstRender);
    }


    [JSInvokable]
    public void OnManufacturerDragStart()
    {
        // hide all manufacturer bikes
        foreach (var m in manufacturers)
            showManufacturerBikes[m] = false;

        showButtonAddManufacturer = false;

        StateHasChanged();
    }

    [JSInvokable]
    public async void OnManufacturerDragEnd(int[] ids)
    {
        showButtonAddManufacturer = true;

        // set order numbers for manufacturers
        for (int orderNo = 0; orderNo < ids.Length; orderNo++)
            manufacturers
                .First(m => m.Id == ids[orderNo])
                .OrderNumber = orderNo;

        _manufacturerService.UpdateAll(manufacturers);
        //ReloadManufacturers();
        //StateHasChanged();
        //var objRef = DotNetObjectReference.Create(this);
        //await jsRuntime.InvokeVoidAsync("EnableManufacturerSorting", objRef);
    }
}

触发的 JavaScript 函数

function EnableManufacturerSorting(dotNetHelper) {

    $('.ulManufacturers').each(function() {
        new Sortable(this, {
            group: 'manufacturers',
            handle: '.drag-handle',
            direction: 'vertical',
            animation: 150,
            onStart: function () {
                console.log("onStart");
                dotNetHelper.invokeMethodAsync('OnManufacturerDragStart');
            },
            onEnd: function () {
                console.log("onEnd");
                var orderList = [];
                $(this.el).children().each(function (index, element) {
                    orderList.push($(element).data('id'));
                });
                var params = JSON.stringify({ 'orderList': orderList });
                dotNetHelper.invokeMethodAsync('OnManufacturerDragEnd', orderList);
                //dotNetHelper.dispose();
                //this.destroy();
            },
        });
    });
}

从 JS 函数和 OnManufacturerDragEnd 中的注释可以看出blazor 函数，我尝试了所有有和没有注释代码的组合，但结果是一样的

更新 1
我发现如果我删除

// set order numbers for manufacturers
for (int orderNo = 0; orderNo < ids.Length; orderNo++)
    manufacturers
        .First(m => m.Id == ids[orderNo])
        .OrderNumber = orderNo;
    _manufacturerService.UpdateAll(manufacturers);

来自 public async void OnManufacturerDragEnd(int[] ids)它工作正常 ->但我最终没有保存新的项目顺序。
如果我把它留在里面但删除

showButtonAddManufacturer = true;
StateHasChanged();

这意味着要么不会保存新订单，要么我无法隐藏“添加新”按钮(gif 底部的加号圆圈，在 bininging 处)，然后将其带回。
我怀疑 sortablejs 之间存在异步性和 blazor s 渲染，我还不能完全弄清楚。 “添加新”按钮可能与它有关

更新 2
检查我的答案，我找到了解决方法。现在的问题是 -> 第二次拖拽到底发生了什么？如果您能向我解释发生了什么，我会接受您的回答。

更新 3
我认为这是朝着正确方向迈出的一步。
是否有可能让 jQuery 和 Blazor 和谐地工作？
jQuery not working properly with my Blazor app

Answer 1

现在，我不知道这样做的确切原因，但我发现的一种解决方法是保存新订单和隐藏/显示添加新按钮，只是隐藏/显示通过 jQuery 而不是 Blazor 添加新按钮，如下所示:

function EnableManufacturerSorting(dotNetHelper) {
    console.log('enabled');
    $('.ulManufacturers').each(function () {
        new Sortable(this, {
            group: 'manufacturers',
            handle: '.drag-handle',
            direction: 'vertical',
            animation: 150,
            onStart: function () {
                dotNetHelper.invokeMethodAsync('OnManufacturerDragStart');
                $('.ulManufacturers .hide-while-dragging').hide(); // this line
            },
            onEnd: function () {
                var orderList = [];
                $(this.el).children().each(function (index, element) {
                    var id = $(element).data('id');
                    if (id != null)
                        orderList.push(id);
                });
                dotNetHelper.invokeMethodAsync('OnManufacturerDragEnd', orderList);
                $('.ulManufacturers .hide-while-dragging').show();  // this line
            },
        });
    });
}

当然，我还添加了 hide-while-dragging类添加到新按钮 <li>在 html 中。
现在，对于更复杂的情况，我想知道到底发生了什么，所以我不会将此标记为答案。我看到有人赞成我的问题，所以这意味着我可能不是唯一一个尝试这个的人。希望有人觉得这很有用。