Question

我有一个使用jQuery UI排序的列表。第一个列表项是“项目1”，第二个是“项目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>

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然后在document.ready重新排列..

Answer 3

我使用3个可排序的方法并通过html元素的ID对其进行排序

enter image description here

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

3 个答案: