Question

我必须排序两个相同的ul 具有相同的类和相同的li元素如果用户对一个ul执行排序，则应执行相同的操作在另一个ul

code:

<ul class="sort">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>


<ul class="sort">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>

列表是克隆，即如果我执行jquery的操作，两者都是相同的在一个排序中，它应该同时按相同的顺序对两个列表进行排序。

我正在使用jquery ui：

 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>



 <script>
 $(function() {
 $( ".sort").sortable().disableSelection();
 });
 </script>

中的变化应该是什么

 <script>
 $(function() {
 $( ".sort").sortable().disableSelection();
 });
 </script>

段以使其有效。

Answer 1

有点hacky但是在update事件函数中，您可以使用已排序的内容完全重新填充其他HTML。

代码：

 $(function () {
     $(".sortable").sortable({
         update: function (event, ui) {
             $(".sortable").not($(this)).html($(this).html());
         }
     }).disableSelection();
 });

演示：http://jsfiddle.net/IrvinDominin/LNH3h/

更新

创建了一个更好的解决方案，而不是重新创建列表，根据移动的元素切换所有元素。

代码：

$(function () {
    $(".sortable").sortable({
        start: function (event, ui) {
            $(this).data("elPos", ui.item.index());
        },
        update: function (event, ui) {
            var origPos = $(this).data("elPos");
            $(".sortable").not($(this)).each(function (i, e) {
                if (origPos > ui.item.index()) {
                    $(this).children("li:eq(" + origPos + ")").insertBefore($(this).children("li:eq(" + ui.item.index() + ")"));
                } else {
                    $(this).children("li:eq(" + origPos + ")").insertAfter($(this).children("li:eq(" + ui.item.index() + ")"));
                }
            })
        }
    }).disableSelection();
});

演示：http://jsfiddle.net/IrvinDominin/LNH3h/5/

Answer 2

试试这个

<ul class="sort1">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>


<ul class="sort2">
<li>a</li>
<li>c</li>
<li>b</li>
<li>d</li>
</ul>
<ul class="sort2">
<li>a</li>
<li>c</li>
<li>b</li>
<li>d</li>
</ul> 


 <script>
 $(document).ready(function(){
 $(".sort1").sortable();
     $(".sort1").disableSelection();
    $(".sort2").val($(".sort1").val());

})
 </script>

jQuery排序两个相同的列表，彼此排序也按相同的顺序排序

2 个答案:

更新