2

私はjqueryuiのドラッグ可能/ドロップ可能を使用してかなりトリッキーなレイアウトに取り組んでいます。

1つのセクションでは、divコンテナ内にドロップ可能な領域があります。コンテナにoverflow：hiddenがありますが、含まれているdroppableがコンテナの境界を超えています。

具体的には、100pxの高さのdivに200pxの高さのドロップ可能オブジェクトが含まれているとしましょう。

問題：ドラッグ可能な要素をドラッグすると、コンテナから100pxしか露出されていなくても、200pxのドロップ可能な領域全体がドロップ可能と見なされます。

ドロップ可能な領域のみを尊重するようにドラッグ可能/ドロップペールを取得するにはどうすればよいですか？

注：この設計は、多くのドロップ可能オブジェクトを含むより大きな複雑なインターフェイスの一部であり、この設定には正当な理由があります。「マークアップを変更する」という解決策は考慮されません。

4

2 に答える 2

1

JSFiddle

親のサイズが変更されるたびに、子のドロップ可能な要素のサイズを親の高さと幅に変更できます。そのリスナーを設定したら、親のサイズ変更イベントをトリガーするだけで、ドロップ可能なコンテナーは常に親の幅と高さに一致します。

$("#drop-container").resize(function(){
    $(this).find('#drop-content').width($(this).width());
    $(this).find('#drop-content').height($(this).height());
});
$("#drop-container").trigger('resize');
$("#drop-content").droppable({
    accept: '.special', 
    hoverClass: 'dropme'
});

$(".special").draggable();
于 2013-02-13T21:53:37.337 に答える