Це відповідь, заснована на логіці відповідей @lotif , але трохи більш узагальненою
Якщо додати / додати після / до того, як елементи будуть фактично переміщені
=> клонування не потрібно
=> події зберігаються
Є два випадки, які можуть статися
- Одна ціль має щось "
.prev()
ious" => ми можемо поставити іншу ціль, .after()
що.
- Одна ціль є першою дитиною, це
.parent()
=> ми можемо .prepend()
іншу націлити на батьків.
Код
Цей код можна зробити ще коротше, але я зберіг його таким чином для читання. Зауважте, що відновлення батьків (за потреби) та попередніх елементів є обов'язковим.
$(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 );
});
... сміливо вкладайте внутрішній код у функцію :)
Приклад скрипки має додаткові події клацання, що додаються для демонстрації збереження подій ...
Приклад скрипки: https://jsfiddle.net/ewroodqa/
... буде працювати в різних випадках - навіть таких, як:
<div>
<div id="one">ONE</div>
</div>
<div>Something in the middle</div>
<div>
<div></div>
<div id="two">TWO</div>
</div>