容器内的jquery ui可拖动滚动

Posted 2023-05-08

【中文标题】容器内的jquery ui可拖动滚动

【英文标题】：jquery ui draggable scrolling within container

【发布时间】：2012-09-01 06:04:10

【问题描述】：

我有一个无序列表，并使用 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 可拖动中的错误吗？ 请帮忙

【问题讨论】：

我一直在看 jquery ui 演示页面，但没有太多帮助，也搜索了 google，但收效甚微

jQuery.Drag 有一个有效的scrolls 参数（页面上有演示）。也许看看该代码是如何工作的并将其实现到 jQuery 的可拖动行为中？

这不是已经被scroll: true处理了吗？似乎已经在做你在 Chrome 中描述的至少jsfiddle.net/SqNx6

是的，它可以工作，那么我一定是缺少一些 js 文件。我将编辑帖子以显示我包含的文件

【参考方案1】：

尝试降级到 jQuery 1.7.2

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

【讨论】：

这可能也是它与@James Montagne 制作的小提琴一起使用的原因。