jquery ui draggable在容器内滚动

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 draggable中的错误吗？请帮忙

Answer 1

尝试降级到 jQuery 1.7.2

（我认为它不应该与 1.8 一起使用。当您下载 jQuery UI 时，您可以在 rar 中找到最新的兼容版本）