我有一个无序列表,并使用 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 1.7.2
(我认为它还不能与 1.8 一起使用。您可以在下载 jQuery UI 时在 rar 中找到最新的兼容版本)
关于javascript - jquery ui 可在容器内拖动滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12316675/