Question

我需要引用鼠标当前结束的元素，同时我使用jQuery Resizable小部件拖动帮助器来调整某些元素的大小。它的resize事件参数都没有给我这个参考;我也尝试过调用

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。

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

2 个答案: