Question

我有2个jQuery UI可排序列表。代码如下：

<div class="chapter_container">
  <p>Available Chapters</p>
  <ul id="sortable_available">
    <li id="t1">Title 1</li>
    <li id="t2">Title 2</li>
    <li id="t3">Title 3</li>
    <li id="t4">Title 4</li>
  </ul>
</div>

<div class="chapter_container">
  <p>Selected Chapters</p>
  <ul id="sortable_selected">
  </ul>
</div>

对于JS，我使用：

jQuery(function() {
  jQuery("#sortable_available, #sortable_selected").sortable({
    connectWith: ".chapter_container ul"
  });
  jQuery("#sortable_selected").on("sortstop", function(event, ui) {
    console.log(ui.position);
  });
  jQuery("#sortable_available, #sortable_selected").disableSelection();
});

我只能获取通过sortstop事件移动的项目的位置。如何获取两个列表中的项目订单？

以下是JSFiddle

Answer 1

你看过refreshPositions方法了吗？如果您调用此方法，则可以从返回的对象中查询子项。

Updated Fiddle

jQuery(function() {
  jQuery("#sortable_available, #sortable_selected").sortable({
    connectWith: ".chapter_container ul"
  });

  jQuery("#sortable_available").on("sortstop", function(event, ui) {
    //Clear the existing content.
    jQuery('#debug').html('');

    //Call refreshPositions and store the children in a local variable.
    var items = jQuery(this).sortable("refreshPositions").children();
    for (var i = 0; i < items.length; i++) {
      //I'm using javascript to get the required values, but you can use jQuery if you so desire.
      jQuery('#debug').html(jQuery('#debug').html() + items[i].innerHTML + ', Top: ' + items[i].offsetTop + ', Left: ' + items[i].offsetLeft + '<br/>');
    }
  });

  jQuery("#sortable_available, #sortable_selected").disableSelection();
});

将第二个项目移动到第一个位置将输出以下内容：

标题2，上：115左：18

标题1，上：152左：18

标题3，上：189左：18

标题4，上：227左：18

$(".selector").sortable("refreshPositions").children();将返回一个数组。

如何获取jQuery UI可排序项目位置？

1 个答案: