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);
        }
 });

我确信将它写入一个函数并将父选择器作为 args 传递是更合适的。

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 有一堆事件，你应该为你绑定正确的事件jquery ui sortable events 我怀疑'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);
    });
}