jQuery UI可拖动在容器内滚动

Question

我有一个无序列表，并使用jquery ui draggable为每个列表项添加了可拖动功能。该列表位于具有id="content"的div内。以下是我的UL列表的快照:

以下是我编写的代码:

 <script src="../../jquery-1.8.0.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
 <script type="text/javascript">
$(function() {
    $( ".draggable" ).draggable({ 
        scroll: true,
        scrollSensitivity: 100,
        revert: true,
        containment: '#content',
        zIndex: 999990,
        revertDuration: 100,
        delay: 100 
    });
});
</script>
<div style="width:200px;height:300px;overflow:auto;" id="content">
    <ul>
    <li class="draggable">One</li>
    <li class="draggable">Two</li>
    <li class="draggable">Three</li>
    <li class="draggable">Four</li>
    <li class="draggable">five</li>
    <li class="draggable">six</li>
    <li class="draggable">Seven</li>
    <li class="draggable">Eight</li>
    <li class="draggable">Nine</li>
    <li class="draggable">Ten</li>
    <li class="draggable">Eleven</li>
    <li class="draggable">Twelve</li>
    <li class="draggable">Thirteen</li>
    <li class="draggable">Fourteen</li>
    <li class="draggable">Fifteen</li>
    <li class="draggable">Sixteen</li>
    <li class="draggable">Seventeen</li>
    <li class="draggable">Eighteen</li>
    <li class="draggable">Nineteen</li>
    <li class="draggable">Twenty</li>
      </ul>
 </div>

我想要实现的是：当我在容器内（即id为"content"的div）拖动任何列表项时，当鼠标位于div边界或大小的边缘时，容器也应该滚动，以便我可以在容器内上下移动。

例如，如果我想将列表中的最后一项拖到列表中的第一项，当鼠标位于div边缘的顶部时，容器（在我们的例子中为div）也应该自动滚动。这是否是jQuery UI可拖动的一个错误？请帮忙。

- sonam

---

我一直在查看jQuery UI演示页面，但并没有太大的帮助，也在谷歌上搜索了一下，但收获甚微。 - sonam

jQuery.Drag具有scrolls参数，可以正常工作（页面上有演示）。也许可以看看该代码的工作原理，并将其实现到jQuery的可拖动行为中？ - Henrik Ammer

这不是已经通过 scroll: true 处理了吗？至少在 Chrome 中似乎已经实现了你所描述的功能 http://jsfiddle.net/SqNx6/ - James Montagne

是的，它可以正常工作。那么我可能漏掉了一些 JavaScript 文件。我会编辑帖子以显示我包含了哪些文件。 - sonam

Answer 1

尝试降级到jQuery 1.7.2

（我认为它还不支持1.8。您可以在下载jQuery UI时在rar文件中找到最新的兼容版本）

- alianos-

---

这也很可能是为什么它可以在@James Montagne创建的fiddle中工作的原因。 - alianos-