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

问题描述：

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

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>

也许像这样的功能添加到您可以排序的“停止”事件？ 'stop：function（）{ \t var sourceHtml = $（'＃sortable'）。html（）; \t $（'＃display_only'）。html（sourceHtml）.find（'li'）。append（''）; }' – artlung

答

怎么样使用$ .fn.clone（）方法克隆排序UL 和triggring克隆每次你用那种

$('#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您可能会遇到一堆事件，您应该为您绑定正确的一个jquery ui sortable events我怀疑'停止'，'beforeStop'或'change'会是正确的

另一个编辑和解决方案可能是：第一个经过其他列表进行排序，automaticaly与像事件绑定：

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

});

简单而高贵

这是在正确的轨道上，但不是那里。根据#sortable列表，我无法获得“#display_only”中的列表重新排序。请记住，“#display_only”包含除#sortable之外的其他内容，所以我不能只克隆该列表。我有一个想法，那就是使用可能的serialize（）来获得新的顺序，并以某种方式重新索引“#display_only”。我目前使用停止，但更新应该工作。 – Kristoffer

啊我没有意识到display_only列表与原始列表中的数据不同。我看到你已经找到了解决方案。请注意，如果唯一的区别是li中的输入字段，那么您仍然可以使用该克隆并遍历列表并相应地添加输入文件。 – alonisser

答

之后，如果调整了一下我得到它的工作。我不确定这是否是解决问题的最佳方法，但它是有效的。在停止时，我调用我的函数重新排序“#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); 
    }); 
}

实际上这个解决方案有很多问题。但主要的一点是，我认为这不会以正确的方式工作。考虑这两个列表是：b，d，c，a排序后第一个是a，b，c，d。那么你将采取一个元素data-id并将其添加到第二个列表中的b元素。 – alonisser

答

有没有真正需要使用数组这里。但是，您可以轻松地在其中定义数组项目。

$('#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); 
     } 
});

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

很好的答案，它节省了我的洞天 –

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

相关推荐