JQuery 정렬 할 수있는 스크롤 가능

Question

두 개의 jquery 정렬 가능 항목이 서로 연결되어 있습니다 (아래 코드). 내가하고 싶은 무엇

$('#da_favourites_sortable').sortable({ 
    connectWith: '#da_available_sortable', 
    handle: 'img.da_icon_handle', 
    revert: true 
}); 

$('#da_available_sortable').sortable({ 
    connectWith: '#da_favourites_sortable', 
    handle: 'img.da_icon_handle', 
    revert: true 
}); 

내가 패널 사이를 이동할 수있는 정렬 요소의 여러 "페이지"를 가질 수 있도록 그들 스크롤 패널 (#da_available_sortable) 중 하나를 만들 수 있습니다.

"사용 가능한"패널을 여러 개의 리로 분할하지 않아도되는 것을 발견 할 수 없습니다. 각 li이 별도의 정렬 가능을 가져야하므로 결국 여러 요소를 "여러 페이지"로 드래그하려면이 기능을 사용하지 않아도됩니다.

#da_available_sortable 정렬 할 수있는 한 번에 10 개의 요소를 두 개의 5 행으로 표시하고 싶습니다.

누군가 앞으로 나 한테이 방법을 보여줄 수 있습니까?

감사합니다.

Answer 1

달성하려는 작업을 이해하기가 어렵습니다. 이런 식으로 찾으세요? 헤드

http://jsbin.com/ekinog/8

:

<style> 
    #wrapper { 
    border:solid 1px #cacaca; 
    height:5em; 
    overflow-y:scroll; 
    } 
</style> 
<script type="text/javascript"> 
$(function(){  

$('#da_favourites_sortable').sortable({ 
    connectWith: '#da_available_sortable', 
    revert: true 
}); 

$('#da_available_sortable').sortable({ 
    connectWith: '#da_favourites_sortable', 
    revert: true 
}); 


}); 
</script> 

체내에서 :

<ul id="da_favourites_sortable"> 
    <li>Lorem</li> 
    <li>Ipsum</li>   
    </ul>  

    <div id="wrapper"> 
    <ul id="da_available_sortable"> 
    <li>Dolor</li> 
    <li>Sit</li> 
    <li>Amet</li> 
    <li>Consectetur</li> 
    <li>Adipiscing</li> 
    <li>Elit</li> 
    </ul> 
</div>