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

Question

I need to get reference to the element(s) that the mouse is currently over while I'm dragging the helper to resize some element using jQuery Resizable widget. None of its resize event params give me that reference; I also tried calling

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

but it gives me wrong element, if any.

Answer 1

elementFromPoint should work. But one problem when using it like this is that the helper is always going to be the element under the mouse. What you can do is hide the helper, then get the elementFromPoint, then show it again. It should work most of the time, except if you have many overlapping elements. Like this for example:

$('#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>