我有一个无序列表,并使用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可拖动的一个错误?请帮忙。
scroll: true
处理了吗?至少在 Chrome 中似乎已经实现了你所描述的功能 http://jsfiddle.net/SqNx6/ - James Montagne