查找与另一个位置最近的 div答案

【问题标题】：Finding positionally closest div to another查找与另一个位置最近的 div
【发布时间】：2011-11-03 05:44:40
【问题描述】：

您好，我如何找到上图中用其他颜色（带问号）突出显示的行长？矩形只是具有绝对位置的 div。

我的目标是找到最接近绿色的 div，但“最接近”是一个非常抽象的定义，所以我决定“最接近”是上图中高亮线最短的一个。也许还有其他更简单的方法可以找到“最近”的 div？？

【问题讨论】：

【解决方案1】：

前段时间有一个与此相关的问题，这启发了我开始编写一个 jQuery 插件来做到这一点。你没有在你的问题中提到 jQuery，但它肯定会使这项任务变得容易得多。

这是一个working example（突出显示最接近红色的div）。你这样调用插件：

$("#myDiv").physicallyClosest("div").css("background-color", "#00ff00");

这会找到物理上最接近#myDiv 的div 并更改其背景颜色。

我确信它远非完美，但如果您能够使用 jQuery，它应该足以让您入门。

【讨论】：

【解决方案2】：

Live Demo

纯 JS。基本上只是得到偏移量，并进行标准距离检查。

//setup for the example
var divs = document.getElementsByTagName('div');

// Randomly place some divs around the screen.
for(var i = 0; i < divs.length; i++){
     divs[i].style.top = Math.random()*500 + 'px';
     divs[i].style.left = Math.random()*600 + 'px';    
     divs[i].onclick = getClosest;
}

// Actual function to get the closest
function getClosest(e){
    var x = this.offsetLeft,
        y = this.offsetTop,
        minDist = 99999,
        closestElement = {};

    for(var i = 0; i < divs.length; i++){
        if(divs[i] !== this){
           var x2 = divs[i].offsetLeft,
               y2 = divs[i].offsetTop;

           dist = Math.sqrt((x2 - x) *(x2-x) + (y2 - y) * (y2-y));

           if(dist < minDist){
               minDist = dist;
               closestElement = divs[i];
            }
        }
    }

    // Set the background of the closest element to red.
    closestElement.style.background = 'red';
}

这是基于左上角的原点，但您可以通过执行以下操作将其更改为元素的中间

x = offsetLeft + width/2;
y = offsetTop + height/2;

【讨论】：

它不能正常工作-> cl.ly/423N2V1Y1h253P0d0b3V我点击了测试1，测试3是红色的
@AlaskaKid 有一个错误，我错误地比较了所有的 x 而没有 y。现在应该可以正常工作了。
你的函数工作得很好但是有一些错误cl.ly/212B3f0u072A3n1E0Y1l刚刚点击了测试5
@AlaskaKid 是的，它的顶部/左侧比较，test1 必须更接近，但它才能工作，它使用了一个简单的记录距离函数。

【解决方案3】：

刚刚写了一个函数，它接受 2 个参数（元素和 div 数组，我们应该在第一个参数中寻找最接近元素的 div）并返回最接近的元素。

Live example

function getClosest(element, divs) {

// Returns x, y coords of object relatively to the whole document
function getWindowPosition(obj) {
  var box = obj.getBoundingClientRect();
  return {
    x : box.left,
    y : box.top
  }
}

var elementLeft = getWindowPosition(element).x;
var elementRight = elementLeft + element.offsetWidth;
var elementTop = getWindowPosition(element).y;
var elementBottom = elementTop + element.offsetHeight;

var smallestDistance = null;
var closestElement = null;
for(var i = 0; i < divs.length; i++) {
    divs[i].style.background = 'yellow'; //For demo, delete this line
    var divLeft = getWindowPosition(divs[i]).x;
    var divRight = divLeft + divs[i].offsetWidth;
    var divTop = getWindowPosition(divs[i]).y;
    var divBottom = divTop + divs[i].offsetHeight;

    var xPosition = 0;
    //Finding div's postion on x axis
    if(divRight < elementLeft) {
        xPosition = elementLeft - divRight;
    } else if(divLeft > elementRight) {
        xPosition = divLeft - elementRight;
    }

    var yPosition = 0;
    //Finding div's postion on y axis
    if(divBottom < elementTop) {
        yPosition = elementTop - divBottom;
    } else if(divTop > elementBottom) {
        yPosition = divTop - elementBottom;
    }

    var valueForComparison = 0;
    if(xPosition > yPosition) {
        valueForComparison = xPosition;
    } else {
        valueForComparison = yPosition;
    }

    //Comparing divs
    if(smallestDistance === null) {
        smallestDistance = valueForComparison;
        closestElement = divs[i];
    } else if(valueForComparison < smallestDistance) {
        smallestDistance = valueForComparison;
        closestElement = divs[i];
    }
}

closestElement.style.background = 'red'; //For demo, delete this line
return closestElement;
}

【讨论】：