Nota
Minha resposta inicial era simplista e não funcionava em 100% dos casos. Fiz então uma implementação um tanto complexa, mas ainda não fiquei satisfeito, assim como com as outras respostas.
Estou considerando apenas as soluções gerais, isto é, que se aplicam a troca de quaisquer elementos em níveis e posições diferentes.
Análise das soluções propostas
A mais simples e direta é a do @mbigsonbr, mas fiquei com um pé atrás por causa da criação e inserção de um elemento desnecessariamente.
A resposta do @Zuul de clonagem também é simples e interessante, mas também parece ainda mais pesada.
A minha resposta parece muito complexa. Será que é necessário tudo aquilo?
O teste de desempenho
Decidi então aplicar as diferentes técnicas e fazer um teste de desempenho. Os resultados confirmaram minhas suspeitas:
- A clonagem é muito lenta
- Minha solução foi discretamente mais rápida que as demais quando os elementos estão no mesmo nível, mas devido à complexidade e ao uso excessiva da API do jQuery, quando os estão em níveis diferentes do DOM, o desempenho foi equivalente.
Ainda não satisfeito, cheguei à conclusão de que a solução do @mgibsonbr poderia ser facilmente convertida para Javascript puro. Fiz novamente o teste e parece que finalmente achei algo interessante.
Vejamos o resultado no gráfico abaixo:
A legenda é a seguinte:
- Azul escuro: o meu algoritmo com nós do mesmo nível
- Vermelho: o meu algoritmo com nós de níveis diferentes
- Amarelo: o algoritmo original do @mgibsonbr com nós do mesmo nível
- Verde escuro: o algoritmo original do @mgibsonbr com nós de níveis diferentes
- Roxo: o algoritmo modificado do @mgibsonbr com nós do mesmo nível
- Azul claro: o algoritmo modificado do @mgibsonbr com nós de níveis diferentes
- Pink: o algoritmo do @Zuul com nós do mesmo nível
- Verde claro: o algoritmo do @Zuul com nós de níveis diferentes
O meu algoritmo
(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)) {
console.log('sameParentStrategy');
sameParentStrategy(one, another);
} else {
console.log('differentParentsStrategy');
differentParentsStrategy(one, another);
}
};
}(jQuery));
O algoritmo modificado do @mgibsonbr
(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));
Modo de Usar
$(elementSelector).swap(anotherElementSelector);