jquery sortable을 사용하여 두 개의 다른 목록을 병렬 정렬

Question

데이터를 두 개의 다른 목록으로 html로 분할해야하는 매우 구체적인 경우가 있습니다. 이처럼 :

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

그리고 두 번째 목록과 같다 : 당신은 "심판"에서 I을 볼 수 있습니다 그래서

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

내가 두 번째 목록에서 <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/