Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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.
Ответить с цитированием
  #2 (permalink)  
Старый 10.07.2019, 10:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Aruta,
jQuery UI Sortable сохранение порядка сортировки при перезагрузке

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

Сообщение от рони Посмотреть сообщение
Aruta,
jQuery UI Sortable сохранение порядка сортировки при перезагрузке
Не подходит. У меня по нажатию на кнопку блок меняет позицию и не получается адаптировать ваш код

Этим кодом у меня происходит нумерация строк
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 нумерация не меняется, но нужно, чтобы позиция запоминалась.
А она не запоминается. Ваш код пробовал - он работает, но только в контексте переноса строки мышью, а не по клику + как только делаешь большую структуру - как у меня. Сразу всё ломается и только перемещение позиции без сохранения работает

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
стрелки вниз, верх при раздвижение блоков dima018 Элементы интерфейса 8 12.02.2018 21:29
Вывести HTML-код как текст Dion Элементы интерфейса 2 28.09.2015 22:45
Как вывести данные из PHP Sherminator Events/DOM/Window 2 07.08.2012 20:11
Вставка блока php в js...Как сделать? reup Общие вопросы Javascript 2 30.07.2009 11:02
Подскажите, пжлст, как вывести в тот же документ результат ф-ции? LexXxeL Элементы интерфейса 4 13.05.2009 13:26