Показать сообщение отдельно
  #1 (permalink)  
Старый 10.07.2019, 08:56
Аспирант
Отправить личное сообщение для Aruta Посмотреть профиль Найти все сообщения от Aruta
 
Регистрация: 08.07.2019
Сообщений: 85

Как вывести сохраненную позицию блока из 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 );
    });
    });

Последний раз редактировалось Aruta, 10.07.2019 в 09:03.
Ответить с цитированием