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。

然后对于每个元素，我将得到这四个值：

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

我将使用这些值来检查以下四点（仍然要检查每个元素）

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

如果我们对“覆盖”DIV 进行了相同的处理（检索它的四个角 xd1、yd1、xd2、yd2），我会这样推理：

如果这些点中的一个或多个属于我的“覆盖”DIV，则认为DIV“覆盖”。

编辑：我不知道有一个插件，我猜它的内部机制就像我的一样，但我敢打赌这是一个比我的更简单的解决方案:)

于 2012-06-27T13:12:46.797 回答
1

我认为目前还没有完整的解决方案。据认为这可能是多种多样的。

但是您可以document.elementFromPoint为此使用函数。

知道可重新调整大小的绝对位置，div您可以创建坐标图，然后查看其下的元素div。

于 2012-06-27T13:04:31.130 回答