javascript - jQuery 可调整大小 : How to get overlapping element during the resize drag

Question

当我使用 jQuery 可调整大小小部件拖动助手来调整某些元素的大小时，我需要获取对鼠标当前所在元素的引用。它的调整大小事件参数都没有给我这个引用；我也尝试过打电话

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>