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

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

    $(document).ready(function () { var arrValuesForOrder = ["3", "1", "4", "2"]; $("#myUnorderedList").sortable({ axis:'y', handle: '.handle', update: function () { var order = $('#myUnorderedList').sortable('serialize'); alert(order); } }); });   #myUnorderedList li img.handle { margin-right: 20px; cursor: move; } #myUnorderedList li { display: block; margin-bottom: 3px; height:30px; background-color: #efefef; }    
 
 
  Item 1 
 
  Item 2 
 
  Item 3 
 
  Item 4 
 
 
   

Answer 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

Answer 2

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

我不确定sortable是否具有移动项目的触发器，但无论哪种方式在脚本初始化之后执行此操作都不是一个好主意，因为这些项目将加载为1,2,3,4然后加载到文档上。准备重新安排..