jQuery UI 드래그 가능 - 세로 및 가로 문제 스크롤

Question

기술 : html, css, javascript, jquery 및 jquery ui.

바이올린의 URL : http://jsfiddle.net/Q7q2G/5/이 (실행 버튼을 누르면)

안녕하세요, 한 사업부 (부모 DIV) 및 부모 DIV의 내부 3 개 목록 (UL)가 있습니다. 3 개 목록 JQuery와 UI에 내가 목록 정렬 및 연결하게 동일 (CSS와 HTML 요소)이다

된 HTML이 부모 DIV가있다

<div class="parent"> 
<ul class="list l1"> 
    <li class="ui-state-default">Item 1</li> 
    <li class="ui-state-default">Item 2</li> 
    <li class="ui-state-default">Item 3</li> 
    <li class="ui-state-default">Item 4</li> 
    <li class="ui-state-default">Item 5</li> 
</ul> 
list2.... 
list3.... 
</div> 

이다 (당신은 목록 사이 요소를 정렬 할 수 있습니다) 다음 CSS :

width: 200px; 
display: inline-block; 
border: 1px solid blue; 
height: 160px; 
overflow-y: auto; 
overflow-x: hidden; 

:

width: 400px; 
border: 1px red solid; 
height: 300px; 
white-space: nowrap; 
overflow-x: auto; 

그리고 목록 요소는 다음 CSS를 가지고

그리고 JS는 다음과 같습니다

는

$(".l1, .l2, .l3 ").sortable({ 
    connectWith: ".list" 
}).disableSelection(); 

문제는 :는 스크롤, 나는이 목록에 하나의 요소를 가지고 내가 목록 3 안에 부모 DIV (빨간색 테두리)에서 스크롤을 넣고 싶을 때하지 않습니다 일 (수평 문제).

또한 목록 1의 요소를 가져 와서 목록 2의 끝에 넣고 싶을 때 목록 2의 스크롤이 작동하지 않습니다 (수직 문제).

누군가가 이러한 문제를 해결할 수 있습니까?

고마워요.

감사합니다.

Answer 1

여기에서 나는 당신을 도울 수있는 개념을 만들었습니다. 즉

http://jsfiddle.net/srpoder/9tLBd/29/

# Stackoverflow required me to add some code, so I did.