Esta é uma resposta baseada em @lotif lógica de resposta do , mas um pouco mais generalizada
Se você acrescentar / acrescentar antes / antes dos elementos serem realmente movidos
=> não é necessário clonar
=> eventos mantidos
Existem dois casos que podem acontecer
- Um alvo tem algo "
.prev()
ious" => podemos colocar o outro alvo .after()
nisso.
- Um alvo é o primeiro filho dele
.parent()
=> podemos .prepend()
o outro alvo para os pais.
O código
Esse código pode ser feito ainda mais curto, mas eu o mantive assim para facilitar a leitura. Observe que o pré-armazenamento dos pais (se necessário) e dos elementos anteriores é obrigatório.
$(function(){
var $one = $("#one");
var $two = $("#two");
var $onePrev = $one.prev();
if( $onePrev.length < 1 ) var $oneParent = $one.parent();
var $twoPrev = $two.prev();
if( $twoPrev.length < 1 ) var $twoParent = $two.parent();
if( $onePrev.length > 0 ) $onePrev.after( $two );
else $oneParent.prepend( $two );
if( $twoPrev.length > 0 ) $twoPrev.after( $one );
else $twoParent.prepend( $one );
});
... sinta-se à vontade para agrupar o código interno em uma função :)
O violino de exemplo possui eventos de clique extras anexados para demonstrar a preservação do evento ...
Violino de exemplo: https://jsfiddle.net/ewroodqa/
... funcionará em vários casos - até um como:
<div>
<div id="one">ONE</div>
</div>
<div>Something in the middle</div>
<div>
<div></div>
<div id="two">TWO</div>
</div>