jQuery UI 可排序多元素目标

Question

我有 2 个列表元素

<div id="list-one">
  <ul class="ul-one">
    <li data-order="1">item 1</li>
    <li data-order="2">item 2</li>
    <li data-order="3">item 3</li>
  </ul>
</div>
<br />
<div id="list-two">
  <ul class="ul-two">
    <li data-order="1">item 4</li>
    <li data-order="2">item 5</li>
    <li data-order="3">item 6</li>
  </ul>
</div>

当我使用 jQuery Sortable 对 ul-one 进行排序时，ul-two 列表元素的顺序可以遵循 ul-one 的顺序吗？

我想要得到这样的结果

<div id="list-one">
  <ul class="ul-one">
    <li data-order="2">item 2</li>
    <li data-order="1">item 1</li>
    <li data-order="3">item 3</li>
  </ul>
</div>
<br />
<div id="list-two">
  <ul class="ul-two">
    <li data-order="2">item 5</li>
    <li data-order="1">item 4</li>
    <li data-order="3">item 6</li>
  </ul>
</div>

只拖ul-one元素

感谢您的回答

Answer 1

抱歉，问题理解有误。

这是一个可行的解决方案。我添加了 id 标记以轻松调用

http://jsfiddle.net/39ZvN/1141/

Answer 2

试试这个

<div id="list-one">
  <ul class="sort ul-one">
    <li data-order="1">item 1</li>
    <li data-order="2">item 2</li>
    <li data-order="3">item 3</li>
  </ul>
</div>
<br />
<div id="list-two">
  <ul class="sort ul-two">
    <li data-order="1">item 4</li>
    <li data-order="2">item 5</li>
    <li data-order="3">item 6</li>
  </ul>
</div>


$( '.sort li' ).each(function() {
      var position = $(this).data('order');
      $(this).siblings().eq(position+1).after(this);
});