Как создать смену номера блока?
Есть страница, на которой строки меняются местами с соседними строками при нажатии на кнопку вверх/вниз
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">Код:
$(function() { |
|
смена соседних блоков
Aruta,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body {
counter-reset: myCounter 0;
}
.order_position span:after {
counter-increment: myCounter 1;
content: counter(myCounter)')';
text-align: center;
margin: 5px 10px;
}
.order__wrap:first-of-type .nav__triangle-up, .order__wrap:last-of-type .nav__triangle-down {
display: none;
}
.order__wrap {
border: 2px solid #8b4513;
margin: 4px;
}
.nav__triangle-up:before {
content: '▲';
}
.nav__triangle-down:before {
content: '▼';
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".order__wrap").on("click", ".nav__triangle-up, .nav__triangle-down", function(event) {
var parent = $(event.delegateTarget),
down = this.classList.contains("nav__triangle-down");
down ? parent.next().insertBefore(parent) :
parent.insertBefore(parent.prev())
})
});
</script>
</head>
<body>
<div class="order__wrap dflex">
<div class="order__half dflex">
<div class="order__nav dflex">
<div class="nav__triangle-up dflex"> //кнопка перемещения заказа вверх на 1 строку
....
</div>
<div class="nav__triangle-down dflex"> //кнопка перемещения заказа вниз на 1 строку
....
</div>
</div>
<div class="order_position">
<span></span> //вот это число надо менять на +1 или -1 при переходе строки вверх/вниз
</div>
<div class="order__data">
... box
</div>
</div>
</div>
<div class="order__wrap dflex">
<div class="order__half dflex">
<div class="order__nav dflex">
<div class="nav__triangle-up dflex"> //кнопка перемещения заказа вверх на 1 строку
....
</div>
<div class="nav__triangle-down dflex"> //кнопка перемещения заказа вниз на 1 строку
....
</div>
</div>
<div class="order_position">
<span></span> //вот это число надо менять на +1 или -1 при переходе строки вверх/вниз
</div>
<div class="order__data">
... room
</div>
</div>
</div>
<div class="order__wrap dflex">
<div class="order__half dflex">
<div class="order__nav dflex">
<div class="nav__triangle-up dflex"> //кнопка перемещения заказа вверх на 1 строку
....
</div>
<div class="nav__triangle-down dflex"> //кнопка перемещения заказа вниз на 1 строку
....
</div>
</div>
<div class="order_position">
<span></span> //вот это число надо менять на +1 или -1 при переходе строки вверх/вниз
</div>
<div class="order__data">
... cat
</div>
</div>
</div>
<div class="order__wrap dflex">
<div class="order__half dflex">
<div class="order__nav dflex">
<div class="nav__triangle-up dflex"> //кнопка перемещения заказа вверх на 1 строку
....
</div>
<div class="nav__triangle-down dflex"> //кнопка перемещения заказа вниз на 1 строку
....
</div>
</div>
<div class="order_position">
<span></span> //вот это число надо менять на +1 или -1 при переходе строки вверх/вниз
</div>
<div class="order__data">
... data
</div>
</div>
</div>
</body>
</html>
|
Aruta,
$(function () {
$('.nav__triangle-up').click(function () {
var $currBlock = $(this).closest('.order__wrap');
var $prevBlock = $currBlock.prev('.order__wrap');
if (!$prevBlock.length) return;
var $currPos = $currBlock.find('.order_position');
var $prevPos = $prevBlock.find('.order_position');
var $currPosNum = $currPos.find('[id^=position]').detach();
var $prevPosNum = $prevPos.find('[id^=position]').detach();
$prevBlock.before($currBlock);
$currPos.append($prevPosNum);
$prevPos.append($currPosNum);
});
$('.nav__triangle-down').click(function () {
var $currBlock = $(this).closest('.order__wrap');
var $nextBlock = $currBlock.next('.order__wrap');
if (!$nextBlock.length) return;
var $currPos = $currBlock.find('.order_position');
var $nextPos = $nextBlock.find('.order_position');
var $currPosNum = $currPos.find('[id^=position]').detach();
var $nextPosNum = $nextPos.find('[id^=position]').detach();
$nextBlock.after($currBlock);
$currPos.append($nextPosNum);
$nextPos.append($currPosNum);
});
});
|
Спасибо за подсказку! Но при переносе на сайт почему-то срабатывала смена через 1 номер.
1 с 3, вместо 1 со 2 2 с 4, вместо 2 с 3, 5 с 7, вместо 5 с 6 и т.д. Но спасибо за помощь всё равно:) |
Работает:)
Спасибо огромное:) |
Цитата:
|
Цитата:
|
Цитата:
Понимаю, что наглею уже, но как сделать еще и добавление в "id=position" значений? Т.к. из него потом мне нужно еще эти цифры вытягивать, чтобы при смене позиции блока он оставался там даже после перезапуска браузера. Если через :after добавлять их, то потом разве можно в LocalStorage записать? |
Aruta,
$(function () {
var blockIds = JSON.parse(localStorage.getItem('blockIds')), $prevBlock;
$.each(blockIds, function (i, id) {
var $thisBlock = $('#' + id);
$thisBlock.insertAfter($prevBlock);
$thisBlock.find('.order_position').append($('#position' + (i + 1)));
$prevBlock = $thisBlock;
});
});
$(window).on('unload', function () {
var blockIds = $('.order__wrap').map(function () { return this.id }).get();
localStorage.setItem('blockIds', JSON.stringify(blockIds));
});
|
| Часовой пояс GMT +3, время: 16:29. |