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

debugcn 发表于 Dev

斯宾塞

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

什么我目前的工作是两个不同的排序列表，但我想实现的是，在第1项的列表1移至底部，第1项的列表2移动到下为好，铭记我不希望相反的情况发生，例如我不能将列表 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>

任何帮助将不胜感激谢谢！

塔索斯邪能

在您的 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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。