Esta es una respuesta basada en la lógica de respuesta de @lotif , pero un poco más generalizada
Si agrega / antepone después / antes de que los elementos se muevan
realmente
=> no se necesita clonación
=> eventos guardados
Hay dos casos que pueden suceder.
- Un objetivo tiene algo "
.prev()
ious" => podemos poner al otro objetivo .after()
que.
- Un objetivo es el primer hijo de its
.parent()
=> podemos .prepend()
el otro objetivo a padre.
El código
Este código podría hacerse aún más corto, pero lo mantuve así para facilitar la lectura. Tenga en cuenta que la prescripción de los padres (si es necesario) y elementos anteriores es obligatoria.
$(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 );
});
... no dude en envolver el código interno en una función :)
El violín de ejemplo tiene eventos de clic adicionales adjuntos para demostrar la preservación de eventos ...
Violín de ejemplo: https://jsfiddle.net/ewroodqa/
... funcionará para varios casos, incluso uno como:
<div>
<div id="one">ONE</div>
</div>
<div>Something in the middle</div>
<div>
<div></div>
<div id="two">TWO</div>
</div>