检测由位置包围的兄弟div

Question

我被要求编写一个原型应用程序，其中用户在div框架内的背景图像上占据重要位置。我的方法是类似于Photoshop的，将动态大小和位置的div绘制到帧内的DOM中。但是，我的下一步是需要帮助的地方。

我需要允许用户选择套索div组。这些将由另一个功能使用。 “tailingdiv”是一个普通的1px边框div，它将被鼠标绘制以包围其中一些兄弟div。挑战是检测哪些div位于“tailingdiv”内部！换句话说，我可能需要比较这些div的xy坐标，并确定哪些明显在tailingdiv内，尽管它是DOM树中的兄弟。作为奖励，我想在尾随日期内div为75％的情况下使用一些软糖因素。

<div class="frame" id="lassoFrame" style="display: block; height: 333px; width: 500px; background-image: url("dump-1459285968.png"); background-size: 500px 333px;">
<div class="lasso ui-draggable" style="position: absolute; left: 96px; top: 263px; width: 320px; height: 35px;" coords="{"x1":96,"x2":416,"y1":263,"y2":298}"></div>
<div class="lasso ui-draggable" style="position: absolute; left: 62px; top: 8px; width: 89px; height: 46px;" coords="{"x1":62,"x2":151,"y1":8,"y2":54}"></div>
<div class="nudgeControl lasso ui-draggable" style="position: absolute; left: 161px; top: 14px; width: 88px; height: 40px;" coords="{"x1":161,"x2":249,"y1":14,"y2":54}"></div>
<div class="tailingdiv" style="position: absolute; left: 51px; top: 4px; width: 388px; height: 71px;" coords="{"x1":162,"x2":249,"y1":13,"y2":56}"></div>
</div>

它可能看起来像这样。我们有一个背景，有人用鼠标绘制了一套套索，他们想绘制tailingdiv以封闭前两个套索div。在绘制tailingdiv（mouseup事件）时，我需要检查这些对象的坐标，并确定哪些div在视觉上位于tailingdiv内。

Answer 1

这是一个答案，假设你想要选择所有与类套索相接触或与divingdiv类碰撞的div的div：

function getBox(elem) {
    elem=$(elem);
    var ofs=elem.offset();
    return {
        x:ofs.left,
        y:ofs.top,
        width:elem.width(),
        height:elem.height()
    };
}
function collide(elem1, elem2) {
  var a=getBox(elem1);
  var b=getBox(elem2);
  return (Math.abs(a.x - b.x) * 2 < (a.width + b.width)) &&
         (Math.abs(a.y - b.y) * 2 < (a.height + b.height));
}
$(function() {
    var tail=$('.tailingdiv');
    var divs=$('div.lasso').filter(function() {
        return collide(tail,this);
    });
    console.log(divs);
});

由于您需要整个框，您可以考虑使用getBoundingClientRect（）而不是经典的jQuery函数。

以下是使用getBoundingClientRect并指定最小重叠百分比（0到1之间的值）的代码。如果省略，则默认为0.7。将其设置为0以使用它，如上例所示 - 严格冲突）：< / p>

function getBox(elem) {
    var e=$(elem);
    if (e.length==0||e.length>1) throw 'getBox accepts only one element as argument';
    var rect=e[0].getBoundingClientRect();
    return {
        x:rect.left,
        y:rect.top,
        width:rect.width,
        height:rect.height
    };
}
function collide(elem1, elem2, overlap) {
  if (typeof(overlap)=='undefined') overlap=0.7;
  var a=getBox(elem1);
  var b=getBox(elem2);
  var area=Math.max(0, Math.min(a.x+a.width, b.x+b.width) - Math.max(a.x, b.x)) * Math.max(0, Math.min(a.y+a.height, b.y+b.height) - Math.max(a.y, b.y))
  return area/(b.width*b.height)>overlap;
}

以下是jQuery集成和使用的示例：

$.fn.overlappedBy=function(elem,overlap) {
    return this.filter(function() {
        return collide(elem,this,overlap);
    });
}
$(function() {
    var tail=$('.tailingdiv');
    var divs=$('div.lasso').overlappedBy('.tailingdiv',0.3);
    console.log(divs);
});