JQuery Sortable排序2个不同的列表同步

Question

我有两个“列表”要排序。 第一：

<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>