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我怀疑'停止'，'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);
    });
}

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

3 个答案: