jqueryソート可能な2つの異なるリストを並行ソート

Question

私は、htmlの2つの異なるリストにデータを分割する必要がある非常に特殊なケースがあります。

<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> 

あなたは第二のリストから<li>要素がの続きです、私が知っている「REF」属性から私を見ることができるように、このような第1リストからの<li>要素。

これらのリストにjQuery UIのsortable（）を有効にする必要がありますが、最初に並べ替えを行うときに、並べ替えが必要になります。私はハンドルを使用しようとしましたが、ハンドル要素が移動された要素の中にある必要があるように見えるので動作しませんが、これらの2つはページの別の場所にあります。

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/