javascript - jQuery UI 可拖动 - 滚动垂直和水平问题

Question

技术:html、css、javascript、jquery 和 jquery ui。

fiddle 网址:http://jsfiddle.net/Q7q2G/5/ (点击运行按钮)

您好，我在父 div 中有一个 div(父 div)和 3 个列表 (ul)。3 个列表是相同的(css 和 html 元素)使用 jquery ui，我使列表可排序和连接(您可以在列表之间对元素进行排序)

html是

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

父 div 具有下一个 css:

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

并且列表元素具有下一个 css:

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

而 js 是:

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

问题:滚动，当我从列表 1 中取出一个元素并且我想将其放入列表 3 时，来自父 div(红色边框)的滚动不起作用(水平问题)。

而且，当我从列表 1 中取出一个元素并想将其放在列表 2 的末尾时，列表 2 中的滚动不起作用(垂直问题)。

有人可以帮我解决这些问题吗？

非常感谢。

问候。

Answer 1

这里我提出了一个可能对你有帮助的概念。

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

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