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

我正在使用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>

这里没有真正需要使用数组.但是,您可以轻松地在其中集成定义数组项.

$('#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传递更合适.