11

我已经完成了这个http://jsbin.com/UBezOVA/1/edit。

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

4

5 回答 5

22

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

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

但是，如文档所述，该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

于 2013-09-09T18:37:36.233 回答
8

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>

于 2017-05-23T02:37:11.833 回答
7

Soratble的toArray [link here]的文档清楚地表明它 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);肯定会输出一个数组。

于 2013-09-09T18:16:41.380 回答
1

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

于 2013-09-09T18:26:31.260 回答
0 

  $( 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()">

于 2018-04-04T12:04:51.483 回答