javascript - JQuery 可拖动 : scroll not working when helper: clone is used

Question

我有一种文件夹列表类型的情况，我可以使用 jquery draggable/droppable 将项目从一个文件夹拖到另一个文件夹。文件夹项目是可拖动的，文件夹是可放置的。它们位于一个小到足以显示垂直滚动条的 div 中。

我在可拖动项上设置了“scroll: true”，这样它们就可以使 div 滚动。当我还在可拖动项目上使用“helper: "clone"”时，滚动不再有效。

我做错了什么？

这是一些非常简化的代码:

<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>

Answer 1

尝试用 position: relative; 的 div 包装溢出的 div；并添加position:relative；到你的溢出部分。

<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>