jQuery-检查元素是否在另一个元素之上

Question

What is the best way to check if element is above another one?

I have container with a lot of children with absolute position, and each of the children is draggable with jQuery-ui draggable..

I need to check in the drag stop if the dragged element is dropped above another one.

I know I could take the element center and iterate all the other elements and check if it is in their area, but I'm looking for more elegant way to check this.

Answer 1

Check this fiddle please: http://jsfiddle.net/g36gLss9/1/

$(function() {
    $( ".draggable" ).draggable({
        stop: function( event, ui ) {
            $( ".draggable" ).each(function(obj){
                $(this).html( 'z-index: ' + $(this).css("z-index"));
            });
        },
        drag: function( ) {
            $(this).html( 'z-index while dragging: ' + $(this).css("z-index"));
        }
    });
  });

As the example demonstrates, the draggable feature from jquery ui leaves the z-index value of the dragged elements untouched.

therefore you can assume that an element appearing after another draggable item would be positioned above said item.

That might not be true though, in case you set z-index manually before. Bu the example also states how to retrieve the z-index of a draggable item. So to be on the safe side you could compae values for z-index first. and in case of equality compare the order of appearance in the code.

Also you can hande the z-index of draggable items with the zIndex option documented here: http://api.jqueryui.com/draggable/#option-zIndex