Как вывести сохраненную позицию блока из Localstorage
Добрый день!
Создаю "приложение" для сайта. нужно, чтобы, при перемещении блока А на место блока В, позиция блоков сохранялась и при следующем запуске браузера или обновлении страницы блок А также отобразился на месте блока В. С кодом перемещения блоков мне помогли, но я в него дописываю сохранение данных в локальное хранилище и не работает. Главное если отдельно кусок кода с записью в хранилище пишу в консоль браузера, то он отрабатывает. Но только на запись. Подскажите, пожалуйста, как это исправить! <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> .order_position span:after { counter-increment: myCounter 1; content: counter(myCounter) ")"; text-align: center; margin: 5px 10px; } $(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); // запись в localStorage $('.order_position').each(function(index){ var key ='position_order'+ index; var value = $(this).val(); localStorage.setItem(key , value ); }); }); |
|
Цитата:
Этим кодом у меня происходит нумерация строк function load(count) { const $items = $('.order__wrap'); $items.filter('.order__wrap').slice(0, count).fadeIn(); const visible = $items.filter('.order__wrap').length; $('.exist').text(visible); } load(); И по факту при смене позиции строки .order__wrap нумерация не меняется, но нужно, чтобы позиция запоминалась. А она не запоминается. Ваш код пробовал - он работает, но только в контексте переноса строки мышью, а не по клику + как только делаешь большую структуру - как у меня. Сразу всё ломается и только перемещение позиции без сохранения работает |
Часовой пояс GMT +3, время: 16:36. |