jQuery Resizable：サイズ変更の際に重なり要素を取得する方法

Question

jQueryサイズ変更可能ウィジェットを使用して要素のサイズを変更するヘルパーをドラッグしている間、マウスが現在終了している要素への参照を取得する必要があります。 resizeイベントのパラメータのどれも私にその参照を与えません。私も呼び出してみた

document.elementFromPoint(ui.position.left, ui.position.top) 

しかし、それは私に間違った要素があれば、それを与える。

Answer 1

elementFromPointが動作するはずです。しかし、このような使い方の1つの問題は、ヘルパーが常にマウスの下の要素になることです。あなたができることはヘルパーを非表示にしてからelementFromPointを取得してから再度表示することです。多くの要素が重なっている場合を除いて、ほとんどの場合は動作します。例えば、次のように：

$('#resize').resizable({ 
 
    resize: function(event, ui) { 
 
    $('.over').removeClass('over') 
 
    ui.helper.hide(); 
 
    $(document.elementFromPoint(event.pageX, event.pageY)).addClass('over'); 
 
    ui.helper.show(); 
 
    } 
 
})

.other { 
 
    float: left; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: solid 1px lightgray; 
 
} 
 
#resize { 
 
    border: solid 1px black; 
 
    width: 50px; 
 
    height: 50px; 
 
    position: absolute; 
 
} 
 
div.over { 
 
    background-color: lightgreen; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css"> 
 

 
<div id="resize"></div> 
 

 
<div class="other"></div> 
 
<div class="other"></div> 
 
<div class="other"></div> 
 
<div class="other"></div> 
 
<div class="other"></div> 
 
<div class="other"></div> 
 
<div class="other"></div> 
 
<div class="other"></div> 
 
<div class="other"></div> 
 
<div class="other"></div> 
 
<div class="other"></div>

Answer 2

あなたは、あなたが興味を持っている要素を捨てられるようにすることができます。