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
    );
}