Question

当我点击提交按钮时，我想获得列表项的当前顺序。但是，似乎 $("#sortable2").sortable("toArray")不显示列表的当前顺序（例如sortable2）。如何获取列表的当前顺序。

Answer 1

您的部分问题是打字错误，省略了jQuery选择器中id的#。否则，您对.sortable("toArray")的使用是正确的。（注意，我使用console.log()代替alert() - 观看浏览器的控制台以获得更好的输出）

function submit(){
   var idsInOrder = $("#sortable2").sortable("toArray");
   //-----------------^^^^
   console.log(idsInOrder);
}

但是，as documented toArray()方法在序列化时默认使用可排序项的id属性。您需要为每个可排序项添加唯一的id属性才能使其生效：

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight" id='i1'>Item 1</li>
  <li class="ui-state-highlight" id='i2'>Item 2</li>
  <li class="ui-state-highlight" id='i3'>Item 3</li>
  <li class="ui-state-highlight" id='i4'>Item 4</li>
  <li class="ui-state-highlight" id='i5'>Item 5</li>
</ul>

将这两者放在一起，它会按预期运作：http://jsbin.com/UBezOVA/6/edit

Answer 2

Soratble [link here]的 toArray 文档明确说明Serializes the sortable's item id's into an array of string.

这意味着，您应该使用每个

的id的可排序元素

<ul id="sortable2" class="connectedSortable">
  <li id="1" class="ui-state-highlight">Item 1</li>
  <li id="2" class="ui-state-highlight">Item 2</li>
  <li id="3" class="ui-state-highlight">Item 3</li>
  <li id="4" class="ui-state-highlight">Item 4</li>
  <li id="5" class="ui-state-highlight">Item 5</li>

现在你的代码var idsInOrder = $("#sortable2").sortable('toArray'); alert(idsInOrder);肯定会输出一个数组。

Answer 3

gaurav 在正确的轨道上，但正如 purefusion 提到的“id属性总是应该以字母字符开头”

因此， html有效的方法是添加数据属性

var idsInOrder = $("#sortable2").sortable('toArray', {attribute: 'data-id'});

$(document).ready(function() {

  var idsInOrder = $("#sortable2").sortable('toArray', {
    attribute: 'data-id'
  });


  alert(idsInOrder);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>


<ul id="sortable2" class="connectedSortable">
  <li data-id="1" class="ui-state-highlight">Item 1</li>
  <li data-id="2" class="ui-state-highlight">Item 2</li>
  <li data-id="3" class="ui-state-highlight">Item 3</li>
  <li data-id="4" class="ui-state-highlight">Item 4</li>
  <li data-id="5" class="ui-state-highlight">Item 5</li>
</ul>

Answer 4

JS：

 $(function() {
     $( "#sortable1, #sortable2" ).sortable({
         connectWith: ".connectedSortable"
     }).disableSelection();
 });

 function submit(){
     var idsInOrder = [];
     $("ul#sortable1 li").each(function() { idsInOrder.push($(this).text()) });
     alert(idsInOrder.join('\n'));
 }

HTML：

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Sortable - Connect lists</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
      #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float:left; margin-right: 10px; }
      #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em;width: 120px; }
  </style>
  <script>

  </script>
</head>
<body>

    <ul id="sortable1" class="connectedSortable">
      <li class="ui-state-default">Item 1</li>
      <li class="ui-state-default">Item 2</li>
      <li class="ui-state-default">Item 3</li>
      <li class="ui-state-default">Item 4</li>
      <li class="ui-state-default">Item 5</li>
    </ul>

    <ul id="sortable2" class="connectedSortable">
      <li class="ui-state-highlight">Item 1</li>
      <li class="ui-state-highlight">Item 2</li>
      <li class="ui-state-highlight">Item 3</li>
      <li class="ui-state-highlight">Item 4</li>
      <li class="ui-state-highlight">Item 5</li>
    </ul>

    <input type="submit" value="Submit" onclick="submit()">
</body>
</html>

这应该有助于以当前顺序显示项目。

请在此处查看最终输入：http://jsbin.com/UBezOVA/21/edit

Answer 5

  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
  function submit(){
   var idsInOrder = $("#sortable").sortable("toArray");
   alert(idsInOrder);
}

 
<ul id="sortable">
  <li class="ui-state-default" id='1'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default" id='2'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default" id='3'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default" id='4'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default" id='5'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default" id='6'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default" id='7'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
 <input type="button" id="btnSubmit" value="Submit" onclick="submit()">

获取jquery可排序列表项的顺序

5 个答案: