如何使 Jquery 可排序影响其他 ul 和列表项？

Question

我正在尝试使用 Jquery Sortable 获取一个列表来影响另一个列表的位置。

我目前正在使用的是两个单独的可排序列表，但我想要实现的是，当列表 1 的 项目 1 移到底部，列表 2 的 项目 1 也移到底部，记住我不想要相反发生例如我无法将列表 2 的第 1 项移到底部以影响列表 1。

<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
$( "#list" ).sortable();
$( "#list" ).disableSelection(); 
} );
</script>
</head>
<body>

<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
</span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
</span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
</span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
</span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
</span>Item 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
</span>Item 6</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
</span>Item 7</li>
</ul>
<ul id="list">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
</span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
</span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
</span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
</span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
</span>Item 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
</span>Item 6</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
</span>Item 7</li>
</ul>

如有任何帮助，将不胜感激！

Answer 1

在你的HTML中：

<ul id="sortable" class="sort-list-ul">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
</span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
</span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
</span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
</span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
</span>Item 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
</span>Item 6</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
</span>Item 7</li>
</ul>
<ul id="list" class=" sort-list-ul-no-drag">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
</span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
</span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
</span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
</span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
</span>Item 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
</span>Item 6</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s">
</span>Item 7</li>
</ul>

在你的 js 中：

     $(function () {
     $(".sort-list-ul").sortable({
         update: function (event, ui) {
             $(".sort-list-ul-no-drag").not($(this)).html($(this).html());
         }
     }).disableSelection();

   $('.sort-list-ul-no-drag').sortable();

 });

这是一个 jsfiddle：https://jsfiddle.net/1Lcx9gnf/15/

如何使 Jquery 可排序影响其他 ul 和列表项？

How to make Jquery sortable affect other ul and list items?

jquery

jquery-ui-sortable