Javascript 检查 div 是否与其他 div 重叠

Question

我无法解决这个问题，所以我希望你们能帮助我解决它。

问题是当一个 div 被动态添加到正文时，我想检查它们是否与另一个 div 重叠。

假设我有一个包含以下信息的第一个 div:

X1 = 316, X2 = 440

这是根据一个盒子的长度为 60px 和他周围的边距为 1px 的信息计算的。此外，exL 代表 div 中“框”的数量(在这个测试用例中它是 2，但它会更多......)所以计算它的代码是:

var X2 = ( oldX1 + ( kist_length * exL ) + ( 2 * exL))

到目前为止我已经得到了这段代码:

// X:
oldX1 = ( 316 );
oldX2 = ( oldX1 + ( kist_length * exL ) + ( 2 * exL));
newX1 = ( 99 );
newX2 = ( newX1 + ( kist_length * newLength ) + ( 2 * newLength));
if( (newX1 >= oldX1 || newX1 <= oldX2) || ( newX2 >= oldX2 || newX2 <= oldX2) ){
    console.log("X is overlapping...");
}

如果我使用上面的代码，程序会说它是重叠的，但正如您在下面看到的那样，事实并非如此。检查器使用的值是(+ kisten 代表 + 长度(所以框 + 框的长度 * 框的次数):

newX = 99
newX + kisten = 223
oldX = 316
oldX + kisten = 440 

我知道这是因为 OR 语句。但是，如果我在 if 中的 () 之间使用 AND 语句，它就不会 100% 起作用。我们来看看下面这张图:

首先，我放置了 Box1。之后我放置了 Box2，在没有关于重叠的警告的情况下成功了。但是 X 是重叠的...(不是 Y，而是 X 是...)。当我放置 Box3 时，我确实收到了 X 重叠的警告...

所以我的问题很简单(但我想答案不是...)，支票有什么问题吗？我做错了 if 语句的哪一部分？

Answer 1

我猜你的脚本中有错字，因为 newX2 >= oldX2 || newX2 <= oldX2总是正确的:-)

但是为了没有任何重叠的条件是(我在段上推理，因为你在这里逐轴处理)新段在旧段之前:

      newX1----------------newX2        oldX1---------------oldX2

或者第二个在第一个之后:

         oldX1---------------oldX2    newX1----------------newX2

所以对应的条件是:

function overlaps() {
    var minOldX = Math.min(oldX1, newX1),
        maxOldX = Math.max(oldX1, newX1),
        minNewX = Math.min(oldX2, newX2),
        maxNewX = Math.max(oldX2, newX2); 

    return (
        maxNewX <= minOldX || // <- first case
        minNewX >= maxOldX    // <- second case
    );
}