15

div要素を定義された領域に完全にフィットさせる簡単な方法はありますか?

例：

http://i.imgur.com/oIw6i.png

<div id="redbox"> RESIZE DIV </div>

<div id="grid">
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  <div id="box4"></div>
</div>

4 つのボックス (グレー) を取得し、div(すべてのボックスの上にある赤) のサイズを変更できます。サイズ変更後、どの div 要素がこの領域に完全に収まるかを知りたいです。

誰もこれを行う方法を知っていますか? にメソッドまたは関数はありJQUERYますか?

4

3 に答える 3

10

withinBoxプラグインがこれを解決するのに役立つかもしれないように私には見えます（ jquery.fn.withinBox）。次のようなコードを使用できます。

var area = $('#redbox'),
    offset = area.offset(),
    selected = $('#grid div').withinBox(offset.left,
                                        offset.top,
                                        area.width(),
                                        area.height()
                                        );
于 2012-06-27T13:08:33.437 に答える
3

私が JQuery で行うことは、すべての要素をループしてチェックし、それらの.offset()値に加えてwidthとheightを取得することです。

次に、要素ごとに次の 4 つの値を取得します。

X1 (offset().top)
Y1 (offset().left)
X2 (= X1 + width)
Y2 (= Y1 + height)

これらの値を使用して、次の 4 つのポイントを確認します (まだ各要素を確認する必要があります)。

x1,y1  x1,y2  x2,y2  x2,y1  (the four corners)

「カバーする」DIV (4 つのコーナー xd1、yd1、xd2、yd2 を取得) で同じトリングを行った場合、次のように推論します。

これらのポイントの1 つ以上が私の「カバー」 DIV に該当する場合、その DIV は「カバー」されていると考えてください。

編集：そのためのプラグインがあることを知りませんでした。内部の仕組みは私のものに似ていると思いますが、私のものよりも簡単な解決策だと思います:)

于 2012-06-27T13:12:46.797 に答える
1

これに対する完全な解決策はまだないと思います。それによると、これはさまざまかもしれません。

document.elementFromPointしかし、そのために関数を使用できます。

サイズ変更可能な絶対位置を知ることdivで、座標のマップを作成し、その下にある要素を確認できますdiv。

于 2012-06-27T13:04:31.130 に答える