jQuery UI draggable - scroll vertical and horizontal issues

Question

Technologies: html, css, javascript, jquery and jquery ui.

Fiddle url: http://jsfiddle.net/Q7q2G/5/ (hit the run button)

Hi, I have one div (parent div) and 3 lists (ul) inside of parent div. The 3 lists are identical (css and html elements) With jquery ui I make the list sortable and connected (you can sort elements between lists)

The html is

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

The parent div has the next css:

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

And the list element has the next css:

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

And the js is:

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

The problem: The scroll, when I take an element from list one and I want to put inside list 3 the scroll from parent div (red border) does not work (horizontal issue).

And also, when I take an element from list one and I want to put at the end of list 2 the scroll from list 2 does not work (vertical issue).

Could someone help me with these issues ?

Thanks a lot.

Regards.

Answer 1

Here I made a concept that might help you.

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

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