以预定义的顺序初始化“jQuery UI 可排序列表”答案

【问题标题】：Initializing 'jQuery UI Sortable List' in pre-defined order以预定义的顺序初始化“jQuery UI 可排序列表”
【发布时间】：2020-07-10 10:12:08
【问题描述】：

我有一个使用 jQuery UI 可排序的列表。第一个列表项是“Item 1”，第二个是“Item 2”。我的要求是列表项必须根据存储在数组“arrValuesForOrder”中的顺序进行初始化。我们如何初始化它呢？

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>

<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/sunny/jquery-ui.css"
rel="stylesheet" type="text/css" />

<script type="text/javascript">


    $(document).ready(function () 
    {

        var arrValuesForOrder = ["3", "1", "4", "2"];

        $("#myUnorderedList").sortable({
                                    axis:'y',
                                    handle: '.handle',
                                    update: function () 
                                            {
                                                var order = $('#myUnorderedList').sortable('serialize');
                                                alert(order);
                                            }
        });
    }); 
</script>

<style>

#myUnorderedList li img.handle 
{
margin-right: 20px;
cursor: move;
}

#myUnorderedList li 
{
display: block;
margin-bottom: 3px;
height:30px;
background-color: #efefef;
}

</style>


</head>

<body>

<div>


<ul id="myUnorderedList"> 

  <li id="listItem_1"> 
    <img src="images/arrow.png" alt="move"  class="handle" /> 
    <strong>Item 1</strong> 
  </li> 

  <li id="listItem_2"> 
    <img src="images/arrow.png" alt="move" class="handle" /> 
    <strong>Item 2</strong> 
  </li> 

  <li id="listItem_3"> 
    <img src="images/arrow.png" alt="move"  class="handle" /> 
    <strong>Item 3</strong> 
 </li> 

  <li id="listItem_4"> 
    <img src="images/arrow.png" alt="move" class="handle" /> 
    <strong>Item 4</strong> 
  </li> 

</ul> 


</div>

</body>
</html>

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

我不认为可排序插件带有设置元素初始顺序的选项。我认为它希望元素最初以正确的顺序呈现（在我看来这是有道理的 - 你为什么不这样做？）

无论如何，这里有一段代码会在初始化可排序插件之前对元素进行排序：

var arrValuesForOrder = ["3", "1", "4", "2"];

var $ul = $("#myUnorderedList"),
    $items = $("#myUnorderedList").children();

// loop backwards so you can just prepend elements in the list
// instead of trying to place them at a specific position
for (var i = arrValuesForOrder[arrValuesForOrder.length - 1]; i >= 0; i--) {
    // index is zero-based to you have to remove one from the values in your array
    $ul.prepend( $items.get(arrValuesForOrder[i] - 1));
}

$("#myUnorderedList").sortable({
    axis: 'y',
    handle: '.handle',
    update: function() {
        var order = $('#myUnorderedList').sortable('serialize');
        alert(order);
    }
});

DEMO

【讨论】：

假设数组值来自数据库，显示它的最佳方法是什么？本质上，我试图将列表位置存储在数据库中，并在用户返回时保留它。我正在寻找适用于列表和
的解决方案
我的解决方案适用于任何事情。您可以使用 $('#myelement').children() 而不是 $('#myelement li') 来避免绑定到 LI 元素。
这将仅在代码加载后重新排序项目，并且最初不会显示您想要的顺序。
您的页面是如何构建的？任何像 asp.net 这样的服务器端语言？如果您无法在服务器端对元素进行排序，您可以最初隐藏列表，对其进行排序并仅在排序时显示它。
你的问题没有意义。服务器端你不排序
而是填充的数据。我猜您正在使用带有数据绑定的中继器（或其他）。然后在绑定之前对数据进行排序。但这与您的问题完全不同，如果需要，您可以发布另一个问题。

【解决方案2】：

为什么要在JS中存储预购？如果是硬编码的 HTML，为什么不更改 HTML？如果您使用脚本语言，为什么不使用它来预订？

我不确定sortable 是否具有移动项目的触发器，但无论哪种方式，在脚本初始化后这样做都不是一个好主意，因为项目将加载为 1,2,3,4然后在 document.ready 上重新排列..

【讨论】：

如果它来自数据库，order 查询以按您想要的顺序获取结果...
它必须是sortable 的列表才能工作。你为什么要把它做成一个div？你现在拥有的一切都很好..

【解决方案3】：

我用 3 个 sortable 解决了这个问题，并按 html 元素的 id 对它们进行排序

【讨论】：