Question

我有一个非常具体的案例，我需要将数据拆分为两个不同的html列表。像这样：

<ul id="first_list">
    <li ref="1">The quick brown</li>
    <li ref="2">My father works</li>
</ul>

第二个列表如下：

<ul id="second_list">
    <li ref="1">jumps over the lazy dog</li>
    <li ref="2">at the Ministry of Defense</li>
</ul>

因此，您可以从“ref”属性中看到我，我知道第二个列表中的哪个<li>元素是第一个列表中<li>个元素的延续。

现在我需要启用jQuery UI sortable（）到那些列表，但是当我重新排序第一个时我需要第二个重新排序。我尝试使用句柄，但它不起作用，因为它看起来像句柄元素需要在移动的元素内，但这两个位于页面中的不同位置。

Answer 1

我相信你应该分享你的一些代码（你尝试过的），我假设你熟悉你正在使用的Sortable插件。您应该在Sortable的成功事件上运行以下代码，以便在排序任何LI时，另一个列表也将被排序。无论如何，

试试这个：

//This line stored the LIs in a temp variable and remove it
var $cachedList = $('<div />').html($('#second_list').html());
$('#second_list > li').remove();

//This line loads up the first UL's LIs and replaces the content for each LI 
//using $cachedList. 
$('#second_list').html($('#first_list').html()).find('li').each(function () {
    $(this).html($cachedList.find('li[ref="'+$(this).attr('ref')+'"]').html());
});

演示：http://jsfiddle.net/AR8px/

使用jquery sortable并行排序两个不同的列表

1 个答案: