16

Dados dois elementos HTML arbitrários A e B na mesma página, como posso descobrir qual deles está "mais próximo" do usuário (i.e. se eles se sobrepusessem, qual deles obscureceria o outro)?

A especificação CSS do W3C descreve "contextos de empilhamento" (stacking contexts), que as engines de renderização que seguem os padrões devem implementar. Entretanto, não consegui encontrar um meio de acessar essa informação via JavaScript. Tudo a que tenho acesso é a propriedade css z-index, que por si só não diz muito, uma vez que na maior parte dos casos está como auto e - mesmo quando expressa por um número - não é um indicador confiável de como os elementos estão realmente exibidos (pois se eles pertencem a contextos de empilhamento diferentes, comparar z-índices é irrelevante).

Observação: eu estou interessado em elementos arbitrários; se ambos estão sob o ponteiro do mouse, apenas um será considerado "hovered", de modo que determinar o mais próximo é trivial. Da mesma forma, se eu souber que eles se intersectam num ponto específico, posso usar document.elementFromPoint() tal como sugerido nessa resposta no SO em inglês. Entretanto, pode não ser o caso de eu conhecer um ponto assim, ou mesmo dele existir - os elementos podem não ter interseção um com outro.

Existe alguma solução geral para esse problema, de preferência uma que não envolva reimplementar o algoritmo de empilhamento que a engine de renderização já está fazendo de qualquer forma?


Motivação: existe uma limitação na fucionalidade "arrastar-e-soltar" (drag-and-drop) do jQuery, onde não é possível decidir com certeza onde soltar um elemento arrastado:

inserir a descrição da imagem aqui

Versões antigas do jQuery escolheriam um deles meio que ao acaso, enquanto versões recentes realizam o drop em ambos (mais detalhes nessa tentativa fracassada de resposta). O ideal seria escolher apenas um deles - o que está "mais próximo da tela"* - e fazer o drop só nele, e para isso eu preciso de um meio correto de determinar seu z-index real (ainda que isso envolva "re-inventar a roda", desde que o resultado seja consistente com o empilhamento realizado pelo browser).

*Outra opção, como apontado por @utluiz, seria levar a área de interseção em consideração ao determinar o alvo correto - seja exigindo que o helper esteja totalmente contido no alvo, seja escolhendo o alvo com maior área de interseção (por exemplo, se está visualmente claro qual é o alvo correto, mas uma "pontinha" do helper toca um elemento distinto). Mas infelizmente, mesmo para calcular corretamente essa área de interseção é necessário se conhecer os índices z relativos, pois ela muda se um obscurece o outro.


Atualização: uma solução aparentemente basante completa foi postada no SOen, o código completo está no GitHub e há um exemplo de uso no jsFiddle. À primeira vista parece ok, mas qualquer feedback adicional seria muito bem-vindo. Se tudo estiver correto, posto depois aqui como resposta.

2
  • 2
    Já me perguntei isso diversas vezes e nunca achei uma solução que não envolvesse reimplementar o algoritmo descrito na especificação do CSS - o que seria bastante pesado.
    – bfavaretto
    22/12/2013 às 22:24
  • 1
    Não sei se vai adiantar alguma coisa, mas tenta pegar o z-index com window.getComputedStyle( elemento ).getPropertyValue("z-index")
    – BrunoLM
    23/12/2013 às 1:24

3 Respostas 3

6

Considerando somente elementos que tenham z-índices explicitamente definidos, é possível simplificar bastante o algoritmo da especificação do CSS. Basicamente, ao comparar dois elementos, é necessário localizar o primeiro contexto de empilhamento que eles compartilham, e comparar os z-índices dos elementos que criaram esse contexto.

Dadas as funções css (que retorna o valor computado de uma propriedade), contexto (que retorna o contexto de empilhamento do elemento) e descendente (que detecta se o primeiro elemento passado descende do segundo), o algoritmo seria:

function naFrente(a, b, memo) {
    // Guardando o elemento passado na chamada original,
    // em caso de recursão
    memo = memo || [[],[]];
    memo[0].push(a);
    memo[1].push(b);

    // Contextos de empilhamento dos elementos passados
    var ctxA = contexto(a);
    var ctxB = contexto(b);

    // Se a é descendente de b, considera que a está na frente
    if(descendente(a, b)) return a;

    // Se b é descendente de ba, considera que b está na frente
    if(descendente(b, a)) return b;    

    // Se no mesmo contexto, compara z-índices
    if(ctxA === ctxB) {
        var zA = +css(a, 'z-index');
        var zB = +css(b, 'z-index');

        // Comparando dois z-índices definidos
        if(!isNaN(zA) && !isNaN(zB)) {
           return zB > zA ? memo[1][0] : memo[0][0];

        // Primeiro termo não definido:
        // retorna o segundo se não for NaN
        } else if(isNaN(zA)) {
            return isNaN(zB) ? memo[0][0] : memo[1][0];

        // Ambos NaN, retorna o primeiro termo
        } else {
            return memo[0][0];
        }

    // Recursão no caso de contextos diferentes
    } else {
        // Se subiu até o body, restaura o contexto anterior
        // para achamada recursiva
        ctxA = ctxA === document.body ? a : ctxA;
        ctxB = ctxB === document.body ? b : ctxB;
        return naFrente(ctxA, ctxB, memo);
    }
}

Porém as APIs disponíveis no browser não oferecem nenhum método para se obter o contexto de empilhamento em que um elemento está. Para implementar nossa própria função, vamos nos basear no que a especificação diz sobre a geração dos contextos:

The root element forms the root stacking context. Other stacking contexts are generated by any positioned element (including relatively positioned elements) having a computed value of 'z-index' other than 'auto'. Stacking contexts are not necessarily related to containing blocks. In future levels of CSS, other properties may introduce stacking contexts, for example 'opacity'

Tradução livre:

O elemento raiz forma o primeiro contexto de empihamento. Outros contextos são gerados por qualquer elemento posicionado (incluindo aqueles com posição relativa) que tenham um valor computado de 'z-index' diferente de 'auto'. Contextos de empilhamento não correspondem necessariamente a blocos contêiners. Em futuras versões do CSS, outras propriedades podem gerar contextos de empilhamento, como 'opacity'.

Portanto, para gerar um contexto de empilhamento o elemento precisa estar posicionado, e ter um z-index ou opacity (em CSS3) declarado. E como um contexto pode conter outros, vamos novamente precisar de uma função recursiva:

function contexto(el) {
    var ctx = el.parentElement;
    if(ctx && ctx !== document.body) {
        // Verifica se o elemento está posicionado, 
        // e se tem z-index ou opacity
        var posicionado = css(ctx, 'position') !== 'static';
        var possuiZIndex = css(ctx, 'z-index') !== 'auto';
        var naoOpaco = +css(ctx, 'opacity') < 1;

        // Se ctx for um contexto, retorna
        if(posicionado && (possuiZIndex || naoOpaco)) {
            return ctx;

        // Procura um contexto mais acima, via recursão
        } else {
            return contexto(ctx);   
        }
    // Chegamos ao elemento raiz    
    } else {
        return document.body;   
    }
}

Isso está bem cru ainda, e acredito que ainda precise de testes e ajustes, mas espero que tenha conseguido transmitir a idéia.


TESTES do @mgibsonbr

Meus testes dão resultados um pouco diferentes dos originais nos casos em que não há z-index definido, ou em caso de empate de z-índices. Nesses casos, a ordem em que os elementos são passados faz diferença: o código retorna o primeiro elemento, a. Sim, isso foi uma decisão arbitrária, que não me agrada, mas são situações-limite.


Métodos auxiliares

(Já estão nos jsfiddles linkados acima, mas é bom registrar aqui também)

// Retorna true se a for descendente de b
function descendente(a, b) {
    var el = a.parentNode;
    while(el) {
      if(el === b) return true;
      el = el.parentNode;
    }
    return false;
}

// Retorna valor computado da propriedade prop do elemento el
function css(el, prop) {
     return window.getComputedStyle(el).getPropertyValue(prop);
}
4
  • Valeu pela tentativa, principalmente pelas referências (vou tentar implementar algo tomando o que você fez como ponto de partida). Só que o demo não parece certo, está dizendo que dentroDeB está na frente quando na verdade quem está na frente é A.
    – mgibsonbr
    23/12/2013 às 19:14
  • Ops, me deu um nó no final do raciocínio. Vou revisar e consertar o código, e te aviso. @mgibsonbr
    – bfavaretto
    23/12/2013 às 19:35
  • Implementei algo consistente com todos meus testes até agora (usei uma estratégia diferente), mas ainda não vou postar como resposta porque precisa de mais testes (muitos edge cases...) http://jsfiddle.net/mgibsonbr/Fevj7/3/
    – mgibsonbr
    23/12/2013 às 20:01
  • @mgibsonbr Muito boa sua versão, provavelmente vou usá-la na próxima vez que precisar. Mas como sou cabeça dura, resolvi alguns dos problemas do meu código, seguindo a minha estratégia original. Eu queria manter simples, mas não tive como fugir de condicionais extras. Nos casos de empate e z-índices não definidos, decidi arbitrariamente retornar o primeiro elemento passado. Espero retomar esse assunto no futuro, quem sabe chego a uma solução melhor...
    – bfavaretto
    24/12/2013 às 2:11
5

Não tenho uma resposta absoluta, mas vou rascunhar algumas ideias sobre esse assunto.

Pensando na Usabilidade

Com relação à figura de exemplo da pergunta, embora tecnicamente seja coerente soltar o objeto sendo arrastado no que estiver mais "perto" do usuário, isso pode causar alguma confusão para algumas pessoas.

A menos que o usuário tenha como saber que A está "na frente" de B (ou vice-versa), não faria sentido para ele que objeto sendo arrastado fosse deixado preferencialmente sobre A ou B, já que ele não tem esse conhecimento sobre camadas. Não seria intuitivo.

Nesse contexto, considerando que os elementos parecem estar todos em uma camada flat, em termos de usabilidade, a ação atual do jQuery de acionar o evento nos dois elementos faria mais sentido, desde que o conceito é "soltar onde o objeto helper está tocando".

Abordagens para "Arrastar e Soltar" (Drag & Drop)

É importante notar que há diferentes abordagens que podem ser adotadas para o "arrastar e soltar". Exemplo:

  1. O objeto pode ser solto (drop) num determinado alvo em potencial ao sofrer intersecção com o mesmo. Este é o conceito usado na pergunta.
  2. O objeto pode ser solto num determinado alvo se aquele estiver totalmente contido dentro da área deste.
  3. Outra possível abordagem seria considerar a posição do cursor do mouse como fator decisivo para definir o destino.

Considero a abordagem #1 é interessante em termos de experiência de usuário, mas tecnicamente enfrente o problema descrito na pergunta. Nos demais casos, pode-se usar o método document.elementFromPoint() para obter o elemento na posição do mouse (#3) ou em algum ponto do objeto sendo arrastado (#2).

Nota: Na abordagem #3, o objeto sendo arrastado (helper) não poderia ficar ob o cursor do mouse para o método document.elementFromPoint() funcionar. Ele teria que ser posicionado a uma certa distância do cursor.

A abordagem #3 resolveria ainda o caso dos objetos de destino estarem parcialmente sobrepostos, pois teríamos apenas um ponto como referencial, evitando ambiguidade. Na figura abaixo, nota-se que abordagem #3 é a que mais facilitaria que o usuário pudesse soltar um elemento em A ou B.

Exemplo de elementos sobrepostos

Usando o z-index

Fiz algumas pesquisas e testes recuperando o z-index via método css do jQuery e também com o método getComputedStyle (como sujerido pelo @BrunoLM). Esses métodos só retornam um valor útil se o objeto tiver o atributo z-index definido numericamente, caso contrário o valor retornado é auto.

Vamos supor que os elementos participantes dos eventos estejam sob nosso controle de forma que todos tenham o z-indez definido, único e estejam no mesmo nível de hierarquia do HTML, sendo filhos de um mesma ancestral. Neste caso, para descobrir o elemento mais próximo da tela basta comparar o valor do atributo z-index de cada alvo em potencial.

Abordagens mais complexas poderiam ser usadas, por exemplo:

  • Se os elementos não tiverem z-index definido, mas tiverem o mesmo ancestral, pode-se verificar a posição de cada um (método index() do jQuery). O elemento com maior índice é o que estará mais "na frente".
  • Se os elementos não tiverem z-index, mas seus ancestrais tiverem, isso pode ser usado para calcular uma aproximação, somando o z-index do "pai" com a posição do elemento filho.

Entretanto, qualquer abordagem desse tipo é uma implementação simplificada do algoritmo de empilhamento da engine do navegador, o que creio, devemos evitar, já que facilmente será "quebrada" por um novo caso de uso.

Conclusão

Uma abordagem diferente para arrastar e soltar pode simplificar a implementação.

Porém, também é possível resolver a questão de forma mais simples limitando o escopo da solução a um ambiente mais controlado, por exemplo, onde todos os elementos participantes possuem um z-index definido e único, além de estarem estarem todos num mesmo local na árvore de elementos (siblings).

7
  • Não fui o downvoter, mas tenho algumas críticas em relação a esta resposta: 1. IMHO soltar em ambos os elementos seria a pior solução em termos de UX, em especial se espera-se que a ação seja exclusiva (ex.: mover); 2. Infelizmente, o elementFromPoint é inútil nesse caso, pois o helper será o elemento retornado (mesmo que se considere apenas um único ponto); 3. O algoritmo de empilhamento não é tão simples, como mostra esse exemplo; uma implementação simplificada não seria suficiente, teria de ser uma precisa.
    – mgibsonbr
    23/12/2013 às 12:37
  • A propósito, concordo com você que o exemplo que usei na pergunta é um caso extremo, mas mesmo uma solução mais apropriada (ex.: soltar no elemento com maior área de interseção) exige que se conheça a posição z relativa dos elementos - para se calcular corretamente essa área...
    – mgibsonbr
    23/12/2013 às 12:42
  • 1
    @mgibsonbr Quanto ao item 2, é possível colocar o helper ao lado do mouse, como neste exemplo do jQuery UI (caixinha #2).
    – utluiz
    23/12/2013 às 13:03
  • 1
    @mgibsonbr Quanto ao item 3, é verdade, por isso repetidamente e em vários pontos da resposta eu apontei que a solução para um problema complexo como esse seria limitar o escopo da solução e evitar reinventar o algoritmo de empilhamento. Vou atualizar um ponto a resposta para ficar mais coerente. Isso funcionaria no caso dos elementos estarem numa mesma árvore.
    – utluiz
    23/12/2013 às 13:06
  • 1
    A questão da experiência do usuário no arrastar-e-soltar é complexa, acho até que merece uma pergunta à parte. Quanto aos demais comentários, concordo, e achei essa abordagem de mover o helper bastante útil. +1
    – mgibsonbr
    23/12/2013 às 13:59
5

Na ausência de soluções mais simples que "reinventar a roda", segue minha tentativa de escrever uma função consistente com o algoritmo de empilhamento usado pelos browsers:

function naFrente(a, b) {
    // Salta todos os ancestrais em comum, pois não importa seu contexto de empilamento:
    // ele afeta a e b de maneira igual
    var pa = $(a).parents(), ia = pa.length;
    var pb = $(b).parents(), ib = pb.length;
    while ( ia >= 0 && ib >= 0 && pa[--ia] == pb[--ib] ) { }

    // Aqui temos o primeiro elemento diferente nas árvores de a e b
    var ctxA = (ia >= 0 ? pa[ia] : a), za = zIndex(ctxA);
    var ctxB = (ib >= 0 ? pb[ib] : b), zb = zIndex(ctxB);

    // Em último caso, olha as posições relativas
    // (Esse valor só será usado se não tiver nenhum z-index explícito)
    var relativo = posicaoRelativa(ctxA, ctxB, a, b);

    // Acha o primeiro com zIndex definido
    // O ancestral "mais fundo" é que importa, uma vez que ele define o contexto de
    // empilhamento mais geral.
    while ( ctxA && za === undefined ) {
        ctxA = ia < 0 ? null : --ia < 0 ? a : pa[ia];
        za = zIndex(ctxA);
    }
    while ( ctxB && zb === undefined ) {
        ctxB = ib < 0 ? null : --ib < 0 ? b : pb[ib];
        zb = zIndex(ctxB);
    }

    // Compara os z-indices, ou usa o método relativo
    if ( za !== undefined ) {
        if ( zb !== undefined )
            return za > zb ? a : za < zb ? b : relativo;
        return za > 0 ? a : za < 0 ? b : relativo;
    }
    else if ( zb !== undefined )
        return zb < 0 ? a : zb > 0 ? b : relativo;
    else
        return relativo;
}

/* Adaptado do código de @bfavaretto
   Retorna um valor se o z-index for definido, undefined caso contrário.
*/   
function zIndex(ctx) {
    if ( !ctx || ctx === document.body ) return;

    // Verifica se o elemento está posicionado, 
    // e se tem z-index ou opacity
    var posicionado = css(ctx, 'position') !== 'static';
    var possuiZIndex = css(ctx, 'z-index') !== 'auto';
    var naoOpaco = +css(ctx, 'opacity') < 1;

    // Se ctx for um contexto, retorna
    //if(posicionado && (possuiZIndex || naoOpaco)) {
    if(posicionado && possuiZIndex) // Ignorando CSS3 por ora
        return +css(ctx, 'z-index');
}

/* Utilitário sugerido por @BrunoLM
   Obtém o valor de uma propriedade CSS levando em consideração a herança, sem jQuery.
*/
function css(el, prop) {
     return window.getComputedStyle(el).getPropertyValue(prop);
}

/* Na ausência de z-index definido, deve comparar os elementos em pré-ordem,
   profundidade primeiro. Há edge cases ainda não tratados.
*/
function posicaoRelativa(ctxA, ctxB, a, b) {
    // Se um elemento é ancestral do outro, o descendente está na frente
    if ( $.inArray(b, $(a).parents()) >= 0 )
        return a;
    if ( $.inArray(a, $(b).parents()) >= 0 )
        return b;
    // Se dois contextos são irmãos, o declarado depois está na frente
    return ($(ctxA).index() - $(ctxB).index() > 0 ? a : b);
}

Exemplo 1. Exemplo 2. Exemplo 3. Estou seguro da correção do código acima exceto pelo posicaoRelativa: ainda que ele esteja consistente com todos os testes apresentados, ele foi elaborado por tentativa e erro, carecendo portanto de uma revisão que garanta conformidade às especificações.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .