jQuery：一个可排序列表，在另一个列表上显示结果

Question

我正在使用 jQuery UI Sortable 来使列表可排序。我还有另一个不可排序的列表，我想在对可排序列表进行排序时更新该列表，以便它显示与可排序列表相同的顺序。

display_only 列表中的项目将包含输入字段，因此理想情况下，“display_only”中的项目也应该在 DOM 中移动，但这不是必需的。

我已经尝试了几乎所有我能想到的方法，比如分离元素并尝试按照新顺序重新插入它等等，但我真的无法弄清楚。任何能引导我走向正确方向的事情都很棒！

示例 HTML：

<ul id="sortable">
    <li data-id="1">Item 1</li>
    <li data-id="2">Item 2</li>
    <li data-id="3">Item 3</li>
</ul>
<ul id="display_only">
    <li data-id="1">Item 1 and som other content</li>
    <li data-id="2">Item 2 and som other content</li>
    <li data-id="3">Item 3 and som other content</li>
</ul>

Answer 1

这里没有真正需要使用数组。但是，您可以轻松地将定义的数组项集成到其中。

 $('#sortable').sortable({
        start: function(event, ui){
                iBefore = ui.item.index();
        },
        update: function(event, ui) {
                iAfter = ui.item.index();
                evictee = $('#display_only li:eq('+iAfter+')');
                evictor = $('#display_only li:eq('+iBefore+')');

                evictee.replaceWith(evictor);
                if(iBefore > iAfter)
                    evictor.after(evictee);
                else
                    evictor.before(evictee);
        }
 });

我确信将其写入函数并将父选择器作为参数传递更合适。

Answer 2

使用 $.fn.clone() 方法克隆排序后的 ul 怎么样？
并在每次你排序时触发一个克隆，

$('#sortable').bind('sort', function(e,ui){
   $newlist = $(this).clone();

   $('#display_only').remove();   //removing the old list
   $newlist.attr('id','display_only'); // giving the right id for the cloned element
   $(this).append($newlist)

});

我不确定确切的语法，你需要研究，但我认为这应该有效，

注意 jquery ui sortable 有一堆事件，你应该为你绑定正确的一个 < a href="http://jqueryui.it/demos/sortable#events" rel="nofollow">jquery ui 可排序事件 我怀疑“stop”、“beforeStop”或“change”将是正确的

另一个编辑和解决方案可能是：在第一个列表排序后，自动使用事件绑定对另一个列表进行排序，例如：

$('#sortable').bind('sort', function(e,ui){
   $("#display_only).sortable()

});

简单而优雅

Answer 3

经过一番调整后，我让它工作了。我不确定这是否是解决该问题的最佳方法，但它确实有效。停止时，我调用函数对“#display_ only”中的项目进行重新排序，循环遍历新顺序，并将其推入数组中。

之后，我循环遍历“#display_only”中的项目并以相同的顺序分离它们，然后将它们附加到我的列表中，如下所示：

function reorder() {
    var newOrder = [];
    $('#sortable li').each(function(i) {
         newOrder.push($(this).attr('data-id'));
    });
    $('#display_only li').each(function(i) {
         var item = $("li[data-id="+newOrder[i]+"]").detach();
         $('#display_only').append(item);
    });
}