Question

This is what I’ve got so far:

onMouseMove: function(event) {
  clearTimeout(ics.timeout);
  ics.timeout = setTimeout(function() {
    var mouseX = event.pageX,
        mouseY = event.pageY;

    $(event.target).parents('li').siblings('li').not('.ui-placeholder').each(function() {
      var li = $(this),
          leftMin = li.offset().left,
          leftMax = parseInt(li.offset().left) + parseInt(li.width()),
          topMin = li.offset().top,
          topMax = parseInt(li.offset().top) + parseInt(li.height());

      var insideX = (mouseX > leftMin && mouseX < leftMax) ? true : false,
          insideY = (mouseY > topMin && mouseY < topMax) ? true : false;

      if (insideX && insideY) {
        console.log('hovering over another item!');
        console.log(this);
        return false;
      }
    });
  }, 300);
}

This will tell me if something is hovering over something else, and what that something else is, but just wondering if anyone could come up with a better solution?

Answer 1

If you will be using droppable as well, you can use hoverClass. This option of droppable will allow you to set a css class for any element which is currently being hovered over with a draggable.