我有一种文件夹列表类型的情况,我可以使用 jquery draggable/droppable 将项目从一个文件夹拖动到另一个文件夹。文件夹项目是可拖动的,文件夹是可放置的。它们位于一个小到足以显示垂直滚动条的 div 中。
我在可拖动项目上设置了“滚动:真”,以便它们可以使 div 滚动。当我还在可拖动项目上使用“助手:“克隆””时,滚动不再起作用。
我究竟做错了什么?
这是一些非常简化的代码:
<div style="background-color: red; width: 500px; height: 100px; overflow: auto;">
<table id="nfTable" class="treeTable">
<tr><td><span class="parent initialized expanded">drop here</span></td></tr>
<tr><td><span class="draggable">drag me</span></td></tr>
<tr><td><span class="draggable">drag me</span></td></tr>
<tr><td><span class="draggable">drag me</span></td></tr>
<tr><td><span class="droppable">drop here</span></td></tr>
<tr><td><span class="droppable">drop here</span></td></tr>
<tr><td><span class="draggable">drag me</span></td></tr>
<tr><td><span class="draggable">drag me</span></td></tr>
<tr><td><span class="draggable">drag me</span></td></tr>
<tr><td><span class="draggable">drag me</span></td></tr>
<tr><td><span class="droppable">drop here</span></td></tr>
<tr><td><span class="droppable">drop here</span></td></tr>
<tr><td><span class="droppable">drop here</span></td></tr>
<tr><td><span class="droppable">drop here</span></td></tr>
</table>
</div>
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
// draggable and droppable in here:
<script type="text/javascript" src="/js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$(".draggable").draggable({
// commenting the line below will make scrolling while dragging work
helper: "clone",
scroll: true,
revert: "invalid"
});
$(".droppable").droppable({
accept: ".draggable",
drop: function(e, ui) {
// todo
}
});
});
</script>