JQuery 可排序排序 2 个不同的列表已同步

Question

我有两个 "lists" 需要排序。
第一个：

<div id="keys">
   <span id="key1">Foo1</span>
   <span id="key2">Foo2</span>
   <span id="key3">Foo3</span>
   <span id="key4">Foo4</span>
</div>

第二

<div id="vals">
   <span id="val1">Bar1</span>
   <span id="val2">Bar2</span>
   <span id="val3">Bar3</span>
   <span id="val4">Bar4</span>
</div>

我的 JQuery 如下：

$(function() {
    $('#keys').sortable({
        placeholder: "ui-state-highlight"
    });
});

JQuery 只是使第一个列表可排序。现在我需要第二个列表与第一个列表同步。因此，如果我将 "key2" 拖到最后一个位置，"val2" 也应该在最后一个位置。第二个列表不可排序。我发现 this 这基本上是我需要的，但是键和值的数量各不相同，我不知道如何循环示例中的代码。

Answer 1

要保持两个列表之间的同步，您需要按照以下代码段中的报告处理更新事件：

$(function () {
  $('#keys').sortable({
    placeholder: "ui-state-highlight",
    update: function( event, ui ){
      var nextPosition;
      var index = ui.item.attr('id').replace('key', '');
      currPosition = $('#val' + index);
      if (ui.item.next().attr('id') === undefined) {
        nextPosition = $('#vals span:last');
        currPosition.insertAfter(nextPosition);
      } else {
        index = ui.item.next().attr('id').replace('key', '');
        nextPosition = $('#val' + index);
        currPosition.insertBefore(nextPosition);
      }
    }
  });
});

<link href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>


<div id="keys">
    <span id="key1">Foo1</span>
    <span id="key2">Foo2</span>
    <span id="key3">Foo3</span>
    <span id="key4">Foo4</span>
</div>
<div id="vals">
    <span id="val1">Bar1</span>
    <span id="val2">Bar2</span>
    <span id="val3">Bar3</span>
    <span id="val4">Bar4</span>
</div>

JQuery 可排序排序 2 个不同的列表已同步

JQuery Sortable sort 2 different lists synchronized

jquery

jquery-ui

jquery-ui-sortable