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。