7

jqueryのドラッグ可能/ドロップ可能を使用して、あるフォルダから別のフォルダにアイテムをドラッグできるフォルダリストタイプの状況があります。フォルダ アイテムはドラッグ可能で、フォルダはドロップ可能です。これらは、垂直スクロール バーを表示するのに十分小さい 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>
4

1 に答える 1

16

オーバーフロー div を position: relative; の 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>
于 2009-11-12T01:54:10.443 に答える