位置で囲まれた兄弟のdivを検出する

Question

私は、ユーザーがdivフレーム内の背景イメージ上の重要な場所を託すというプロトタイプアプリケーションを書くように求められました。私のアプローチはPhotoshopのようなもので、フレーム内のDOMに動的なサイズと位置のdivを描画します。しかし、私の次のステップは、私が助けを必要とする場所です。

ユーザーがlasso divのグループを選択できるようにする必要があります。これらは別の関数によって使用されます。 「tailingdiv」は、兄弟divのいくつかを囲むようにマウスで描画されるプレーン1px境界divです。課題は、 "tailingdiv"内にどのdivが配置されているかを検出するです。！言い換えれば、これらのdivのxy座標を比較し、がDOMツリー内の兄弟であるにもかかわらず tailingdivの内部にあるかどうかを判断する必要があります。ボーナスとして、divがtailingdiv内で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> 

このような感じです。私たちは、誰かがラッセルのセットを描いた背景を持っていて、トップ2のラッソのdivを囲むtailingdivを描きたいと思っています。 tailingdiv（mouseupイベント）を描画する際に、これらのオブジェクトの座標を調べて、tailingdiv内にどのdivが視覚的に配置されているかを判断する必要があります。ここで

Answer 1

そのタッチ投げ縄クラスを持つすべてのdivを選択するか、クラスtailingdivと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); 
}); 

従来のjQuery関数の代わりにgetBoundingClientRect（）を使用することを検討するかもしれません。

ここでは、getBoundingClientRectを使用し、最小重複率（0と1の間の値）を指定するコードを示します。省略した場合は0.7になります。前の例のように使用するには0に設定します。

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