jQuery可調整大小：如何在調整大小的拖動過程中獲取重疊元素

Question

當我拖動幫助程序以使用jQuery Resizable小部件調整某個元素的大小時，我需要獲取鼠標當前結束的元素的引用。它的調整大小事件都沒有給我提供參考;我也試過打電話

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

但它給了我錯誤的元素，如果有的話。

Answer 1

elementFromPoint應該工作。但是像這樣使用它的一個問題是，助手總是成爲鼠標下的元素。你可以做的就是隱藏幫助器，然後得到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

您可以嘗試使用droppable，即將您感興趣的元素設置爲droppable。