Question

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

我目前使用的是两个单独的可排序列表，但我想要实现的是，当列表1 的项目1 移动到底部时，< em> list 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和列表项？

1 个答案: