jQuery Resizable：如何在调整大小拖动期间获得重叠元素

Question

我需要在拖动助手以使用 jQuery 可调整大小的小部件调整某些元素的大小时获取对鼠标当前悬停的元素的引用。 None 的调整大小事件参数给了我那个参考；我也试过打电话

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

但它给了我错误的元素，如果有的话。

Answer 1

您可以尝试使用 droppable，即将您感兴趣的元素设为可放置。

Answer 2

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>

jQuery Resizable：如何在调整大小拖动期间获得重叠元素

jQuery Resizable: How to get overlapping element during the resize drag

javascript

jquery

jquery-ui

resizable

jquery-ui-resizable