Question

检查元素是否高于另一个元素的最佳方法是什么？

我有很多有绝对位置的孩子的容器，每个孩子都可以用jQuery-ui拖动来拖拽..

如果拖动的元素落在另一个上面，我需要检查阻止停止。

我知道我可以使用元素中心并迭代所有其他元素并检查它是否在他们的区域中，但我正在寻找更优雅的方法来检查它。

Answer 1

请检查这个小提琴：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"));
        }
    });
  });

如示例所示，来自jquery ui的可拖动特征使得拖动元素的z-index值保持不变。

因此，您可以假设出现在另一个可拖动项目之后的元素将位于所述项目上方。

如果您之前手动设置了z-index，那可能不是这样。该示例还说明了如何检索可拖动项目的z-index。因此，为了安全起见，您可以首先比较z-index的值。并且在相等的情况下比较代码中的出现顺序。

此外，您可以使用此处记录的zIndex选项处理可拖动项目的z-index：http://api.jqueryui.com/draggable/#option-zIndex

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

1 个答案: