Есть страница, на которой строки меняются местами с соседними строками при нажатии на кнопку вверх/вниз
https://habrastorage.org/webt/5d/21/...f986482979.png
В каждой из этих строк имеется порядковый номер строки.
Скрипт на jQuery написал, чтобы строки менялись местами, написал, чтобы строка 1 принимала значение строки 2 (порядковый номер) при перемещении, но не получается при этом, чтобы строка 2 принимала номер 1, т.к. выполнение последовательное происходит и вторая строка вообще стирает значение номера.
В итоге получается, что строка 2 имеет порядковый номер 2 и данные блока 1, а строка 1 вообще без номера становится.
Помогите, пожалуйста. Весь день сижу с этой проблемой.
p.s. скрипт нужен не для константных вручную прописанных id=1, id=2, а чтобы автоматически определись id перемещаемых блоков и менялись в них порядковые номера, т.к. строк может быть 2, а может быть и 50 и id каждого прописывать вручную в код - не комильфо. Логику понимаю как должно работать, а как написать это не получается никак
|
Код:
|
<div id="order-1" class="order__wrap dflex">
<div class="order__half dflex">
<div class="order__nav dflex">
<div id="pos_up" class="nav__triangle-up dflex"> //кнопка перемещения заказа вверх на 1 строку
....
</div>
<div id="pos_down" class="nav__triangle-down dflex"> //кнопка перемещения заказа вниз на 1 строку
....
</div>
</div>
<div class="order_position">
<span id="position1">1)</span> //вот это число надо менять на +1 или -1 при переходе строки вверх/вниз
</div>
<div class="order__data">
...
</div>
</div>
</div>
<div id="order-2" class="order__wrap dflex">
<div class="order__half dflex">
<div class="order__nav dflex">
<div id="pos_up" class="nav__triangle-up dflex"> //кнопка перемещения заказа вверх на 1 строку
....
</div>
<div id="pos_down" class="nav__triangle-down dflex"> //кнопка перемещения заказа вниз на 1 строку
....
</div>
</div>
<div class="order_position">
<span id="position2">2)</span> //вот это число надо менять на +1 или -1 при переходе строки вверх/вниз
</div>
<div class="order__data">
...
</div>
</div>
</div> |
jQuery:
|
Код:
|
$(function() {
var images = $('order__wrap');
$('.nav__triangle-up').click(function() {
var currentBlock = $(this).parent().parent().parent();
var prevBlock = currentBlock.prev();
swap(currentBlock, prevBlock);
return false;
});
$('.nav__triangle-down').click(function() {
var currentBlock = $(this).parent().parent().parent();
var nextBlock = currentBlock.next();
swap(nextBlock, currentBlock);
return false;
});
});
function swap(a, b) {
var up = $('.nav__triangle-up');
if (a.size() > 0 && b.size() > 0) {
a.insertBefore(b);
}
} |
Если можно сделать это на JS именно и перемещение и смену порядкового номера, то буду признателен такому коду
