Você tem dois elementos quaisquer na estrutura do documento da sua página (DOM). Como invertê-los, isto é, colocar um no lugar do outro?
Abordagens para solução
O problema não é tão simples quanto pode parecer a princípio, pois ao movermos um dos elementos, perdemos sua posição original e não é tão fácil armazenar a localização de um elemento em Javascript.
Vamos analisar algumas abordagens nos tópicos abaixo.
Variável auxiliar
Podemos usar o princípio básico da troca de valores entre variáveis. Por exemplo, dadas as variáveis A e B, podemos trocar os valores usando uma variável auxiliar AUX:
AUX = A
A = B
B = AUX
Simples, não? Mas estamos aqui falando da posição de elementos na estrutura HTML. O que seria nossa variável auxiliar? A resposta é: um elemento criado dinamicamente.
Colocando isso numa solução reutilizável em forma de um plugin para jQuery:
(function ($) {
$.fn.swap = function(anotherElement) {
var a = $(this).get(0);
var b = $(anotherElement).get(0);
var swap = document.createElement('span');
a.parentNode.insertBefore(swap, a);
b.parentNode.insertBefore(a, b);
swap.parentNode.insertBefore(b, swap);
swap.remove();
}
}(jQuery));
A utilização é muito simples:
$(seletorElemento).swap(seletorOutroElemento);
Puff! Os elementos foram trocados.
Armazenando a posição do elemento
Outra abordagem, que não envolve a criação de um elemento adicional, é armazenar a posição de pelo menos um dos elementos. Na verdade, só precisamos armazenar a posição do elemento que será movido primeiro.
O problema está em como representar a posição de um elemento, pois a sua inserção será feita relativamente a algum outro. Se usarmos o anterior como referência, teremos problemas se ele for o primeiro. Se usarmos o posterior, teremos problemas se ele for o último. Pior, os dois elementos a serem trocados podem estar próximos um do outro, em sequência!
Não vou descrever minuciosamente as nuances do algoritmo que desenvolvi porque não creio ser interessante, mas considere a seguinte implementação:
(function ($) {
$.fn.swap = function(anotherElement) {
var sameParentStrategy = function(one, another) {
var oneIndex = one.index();
var anotherIndex = another.index();
var swapFunction = function(first, second, firstIndex, secondIndex) {
if (firstIndex == secondIndex - 1) {
first.insertAfter(second);
} else {
var secondPrevious = second.prev();
second.insertAfter(first);
first.insertAfter(secondPrevious);
}
}
if (oneIndex < anotherIndex) {
swapFunction(one, another, oneIndex, anotherIndex);
} else {
swapFunction(another, one, anotherIndex, oneIndex);
}
};
var differentParentsStrategy = function(one, another) {
var positionStrategy = function(e) {
var previous = e.prev();
var next = e.next();
var parent = e.parent();
if (previous.length > 0) {
return function(e) {
e.insertAfter(previous);
};
} else if (next.length > 0) {
return function(e) {
e.insertBefore(next);
};
} else {
return function(e) {
parent.append(e);
};
}
}
var oneStrategy = positionStrategy(one);
var anotherStrategy = positionStrategy(another);
oneStrategy(another);
anotherStrategy(one);
return this;
};
//check better strategy
var one = $(this);
var another = $(anotherElement);
if (one.parent().get(0) == another.parent().get(0)) {
sameParentStrategy(one, another);
} else {
differentParentsStrategy(one, another);
}
};
}(jQuery));
Note as diferentes estratégias de troca, dependendo dos elementos serem ou não filhos de um mesmo “pai”.
Clonagem dos elementos
Uma terceira alternativa, um tanto simplista na verdade, é clonar os dois elementos e substituir os originais um pelo outro. Vejamos o código:
(function ($) {
$.fn.swap = function(anotherElement) {
// cache elements
var $div1 = $(this),
$div2 = $(anotherElement);
// clone elements and their contents
var $div1Clone = $div1.clone(),
$div2Clone = $div2.clone();
// switch places
$div1.replaceWith($div2Clone);
$div2.replaceWith($div1Clone);
}
}(jQuery));
Análise das soluções
Cada abordagem parece ter seu ponto fraco. Criar um elemento auxiliar deixa qualquer um com um pé atrás por causa da criação e inserção de um elemento “inútil” ao DOM. Porém, a complexidade do algoritmo que calcula a posição dos elementos e as várias funções usadas da API do jQuery chega a dar calafrios na espinha. E quanto a clonar os elementos? Isso não pode ser algo do bem!
Note que a primeira abordagem, por ser simples e direta, pode facilmente ser implementada sem usar a API do jQuery. Usei propositalmente a API nativa do Javascript para gerar um ganho de desempenho, pois, como veremos a seguir, isso faz muita diferença. Já as demais abordagens exigiriam alterações nada triviais para depender apenas da API nativa.
Ao invés conjecturar, vamos logo ao teste de desempenho. Preparei oito cenários com os algoritmos de troca descritos acima. Para cada algoritmo, o desempenho para troca de nós que estão no mesmo nível e o desempenho para troca de nós que estão em locais diferentes do HTML foram medidos separadamente. Além disso, o algoritmo que usa a “variável auxiliar” foi desmembrado em dois: o primeiro usando a API do jQuery e o segundo, como descrito no respectivo tópico, usando a API nativa.
Considere o seguinte gráfico:
A legenda para relacionar cor e algoritmo:
- Azul escuro: nós no mesmo nível armazenando a posição do elemento.
- Vermelho: nós em níveis diferentes armazenando a posição do elemento.
- Amarelo: nós no mesmo nível com variável auxiliar e a API do jQuery.
- Verde escuro: nós em níveis diferentes com variável auxiliar e a API do jQuery.
- Roxo: nós no mesmo nível com variável auxiliar e API nativa, sem jQuery.
- Azul claro: nós em níveis diferentes com variável auxiliar e API nativa, sem jQuery.
- Pink: nós no mesmo nível usando clonagem.
- Verde claro: nós de níveis diferentes usando clonagem.
Conclusões
Os resultados confirmaram algumas das suspeitas:
- A clonagem é muito lenta.
- Usando a API do jQuery, armazenar o local da variável é mais rápido do que criar e inserir um elemento auxiliar.
- Porém, usar a API nativa do Javascript gerou um ganho em torno de 10x no desempenho. Mesmo com a alteração no DOM gerada pera inserção da variável auxiliar, o desempenho desta solução superou todas as demais.
Não pretendo aqui tirar nenhum mérito de uma excelente biblioteca como o jQuery, pois em muitos casos ela nos permite obter um desempenho muito superior a uma “solução caseira”. Porém, não devemos tomar qualquer biblioteca por uma solução definitiva para todos os problemas.
Muitos cenários exigirão código específico e usar uma API nativa, de modo a remover camadas de abstração, muitas vezes é o melhor caminho.
Nós, desenvolvedores, devemos ser flexíveis o suficiente para trabalhar em diferentes níveis de abstração. Devemos saber quando “baixar” o nível… 😉
Este artigo foi baseado na minha resposta no StackOverflow em Português e nas respostas de outros excelentes desenvolvedores como Marcelo Gibson e Zuul!
