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

尝试使用div位置包裹溢出div：position; 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>

JQuery draggable：使用helper时滚动不起作用：使用clone

1 个答案: