4

2 つの div があり、一方が他方の中にあります。外側の div (コンテナー) は任意のサイズです。内側の div は、そのコンテナーよりも小さい指定されたサイズに設定されます。

jquery draggable を内側の div に適用しました。内側の div をコンテナーの外縁を越えてドラッグすると、親コンテナーのサイズを自動的に変更しようとしています。どうすればこれを行うことができますか？

新しい質問をするとき、StackOverflow で同様の機能が見られます。質問を入力するためのテキストエリアには、テキストエリアのサイズを変更する「grippie」という名前の div があります。これはまさに私が探している機能ですが、テキストエリアの代わりに div を使用しています。

4

2 に答える 2

5

どうぞ。水平方向と垂直方向の両方で機能します。http://jsfiddle.net/evunh/1/で実際の動作を確認してください。 

var i = $('#inner');
var o = $('#outer');
i.draggable({
    drag: function(event, ui) {
        if (i.position().top > o.height() - i.height()) {
            o.height(o.height() + 10);
        }
        if (i.position().left > o.width() - i.width()) {
            o.width(o.width() + 10);
        }
    }
});
于 2011-02-16T22:40:00.977 に答える
0

jquery draggable に付属のドラッグ機能を利用できます。ドラッグ機能では、内側の div の端がコンテナーの div の端の外側にあるかどうかを確認できます。

そうである場合は、コンテナ div の幅または高さを増やします。

jquery ui でネイティブな position メソッドを使用して、両方の div タグの上、下、左、右の位置を確認できます。

これらのメソッドがどのように機能するかの詳細については、API へのリンクを次に示します。

  1. ドラッグ可能-> イベント -> ドラッグ
  2. 位置
于 2011-02-16T21:41:02.073 に答える