Пару раз сталкивался с тем, что надо поменять 2 блока местами при нажатии на кнопку или при определенной ширине. Для этого в первую очередь нужно подключить jquery.
Пример:
See the Pen Swap Blocks by Aleksandrs (@CoolS2) on CodePen.
Разбор кода:
Создаем кнопку, при нажатии будет срабатывать наш скрипт и создаем пару блоков, внутри блоков пишем заголовок и рандомный текст ( для удобства подключаем bootstrap ).
<button>Swap blocks</button>
<div class="row">
<div class="col-md-6">
<div class="inside-block left">
<h3>Hello</h3>
<p>Lorem ipsum (LEFT BLOCK)</p>
</div>
</div>
<div class="col-md-6">
<div class="inside-block right">
<h3>Bye</h3>
<p>Lorem ipsum (RIGHT BLOCK)</p>
</div>
</div>
</div>
Прописываем им стили так, чтобы они друг от друга отличались, в данном примере мы делаем границы блоков разного цвета (для наглядности)
h3{
font-size:18px;
text-transform: uppercase;
}
p{
font-size: 14px;
}
.inside-block{
padding: 15px;
border: 3px dashed;
}
.left{
border-color: #0c7fd7;
}
.right{
border-color: #fab23a;
}
И теперь сам скрипт. В первую очередь, мы создаем функцию для jquery, которую можно будет в дальнейшем использовать как обычный триггер
$('button').on('click', function(){
$('.left').swap('.right');
});
Создаем переменные, записываем в каждый информацию выбранного блока и меняем их местами
jQuery.fn.swap = function(b) {
b = jQuery(b)[0];
var a = this[0],
a2 = a.cloneNode(true),
b2 = b.cloneNode(true),
stack = this;
a.parentNode.replaceChild(b2, a);
b.parentNode.replaceChild(a2, b);
stack[0] = a2;
return this.pushStack( stack );
};
Вот и все, теперь каждый раз, когда нам нужно поменять местами блок, мы можем использовать .swap
Реальный пример
У меня было так что на сайте, было 2 колонки с выпадающим списком. (к примеру как в гугл переводчике), где ты хочешь перевести с одного языка на другой, а потом наоборот, и есть кнопка быстрый свап, и тогда не надо каждый раз искать нужный вариант в выпадающем списке
Или вот такой пример:
Если у вас есть вопросы или возможно у вас есть варианты получше, я буду рад, если вы поделитесь им в комментариях с подробным описанием.
При клике нельзя менять блок на который кликнули с другим блоком постоянно
$(‘.p’).click( function(){
$(this).swap(‘div’);
});
Работает свап только в одну сторону