asp.net 和jQuery UI可排序，点击按钮后保持元素顺序

问：

在标题中，我有这个javascript代码：

<script>
    $(function () {
        $("#sortable").sortable();
        $("#sortable").disableSelection();
    });
 function checkOrd() {
     var items = $('#sortable li').map(function () {
         return $.trim($(this).attr('id'));
     }).get();
     
     document.getElementById("rightOrder").value = items;
}
</script>

和这个标记：

<form id="form1" runat="server">
    <div>
        <div class="mt-5">
            <div id="d" runat="server"></div>
        </div>
        <asp:HiddenField runat="server" ID="rightOrder" />
        <button onclick="sortItems();">Sort lists</button>
        <button onclick="checkOrd();" runat="server" id="btnCheckOrder" onserverclick="btnCheckOrder_ServerClick">Check order</button>

    </div>
</form>

这是我通过代码隐藏添加的标记：

<ul id="sortable" class="sortable-list">
 <li id="3" class="item" draggable="true">
  <div class="details">
   <img src="images/img-1.jpg" />
   <span>Bello</span>
  </div>
  <i class="uil uil-draggabledots"></i>
 </li>
 ...
</ul>

这是我的按钮点击：

protected void btnCheckOrder_ServerClick(object sender, EventArgs e) /*versione iniziale*/
 {
     string[] order = rightOrder.Value.Split(',');
     Int16 i = 0;
     foreach (string ordinalID in order)
     {
         ++i;

         HtmlGenericControl ul = (HtmlGenericControl)d.FindControl("sortable");
         HtmlGenericControl listItem = (HtmlGenericControl)ul.FindControl(ordinalID);
         listItem.Attributes.Remove("dragging");
         if (ordinalID != i.ToString()){listItem.Attributes.Add("class", "item bg-danger");}
         else{listItem.Attributes.Add("class", "item bg-success");}
         
     }

结果：

当我更改元素的顺序（例如切换前两个）时，我可以在代码后面获得正确的顺序，并将正确位置的元素的背景颜色更改为绿色，但在此之后，列表顺序将恢复为最初的样子（我假设有回发或页面刷新）。我怎样才能避免这种情况？单击按钮后，我想检查元素的正确位置并保持其顺序。谢谢！