0

私はすでにjQueryフォーラムでこの質問をしましたが、ここほど活発ではありません。

1つのページに複数のドロップ可能な領域がある場合に問題が発生しました。複数のドロップ可能な領域があり、スクロールできるdiv（オーバーフロー：スクロール）の上に、移動しない「静的な」ドロップ可能な領域があります。div内のドロップ可能オブジェクトの1つが静的ドロップ可能オブジェクトの下にあるようにdivをスクロールすると、静的領域にドロップすると、両方の領域に対してドロップイベントが発生します。

申し訳ありませんが、この説明はあいまいな場合があるため、サンプルをまとめました。

マークアップ：

<div style="float:left; width:300px; height: 300px; border: 1px solid #000;">
    <ul class="draggables">
        <li>Draggable</li>
        <li>Draggable</li>
        <li>Draggable</li>
        <li>Draggable</li>
        <li>Draggable</li>
    </ul>
</div>
<div style="float:left; width:300px; height: 300px; border: 1px solid #000;">
    <div class="static-droppable" style="width:298px; height:100px; border:1px solid #f00;">Static Drop Area</div>
    <div style="width:298px; height:198px; overflow-y:scroll; border:1px solid #0f0;">
        <ul class="scroll-droppables">
            <li style="border:1px solid #00f; height:60px;">Droppable</li>
            <li style="border:1px solid #00f; height:60px;">Droppable</li>
            <li style="border:1px solid #00f; height:60px;">Droppable</li>
            <li style="border:1px solid #00f; height:60px;">Droppable</li>
        </ul>
    </div>
</div>

Javascript：

//create draggables
jQuery('.draggables li').draggable({
    revert: 'invalid',
    cursor: 'move',
    helper: 'clone'
});

//the static droppable area
jQuery('.static-droppable').droppable({
    greedy: true,
    drop: function(event, ui) {
        alert('Dropped on static drop area!');
    }
});

//scrolling droppables
Query('.scroll-droppables li').droppable({
    drop: function(event, ui) {
        alert('Dropped on scrolling drop area!');
    }
});

静的ドロップ領域を「貪欲」にしようとしましたが、それは状況に役立たなかったようです。

これを止める方法について何か考えはありますか？

4

1 に答える 1

0

私も同じ問題を抱えていました。最初に「静的な」Droppableを初期化することで修正できました..

于 2010-04-14T20:13:18.017 に答える