7

我有一种文件夹列表类型的情况,我可以使用 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>
4

1 回答 1

16

尝试用具有位置的 div 包装溢出 div:relative; 并添加位置:相对;到你的溢出 div。

<div style="position: relative;">
    <div style="position:relative; 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>
</div>
于 2009-11-12T01:54:10.443 回答