Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как создать смену номера блока? (https://javascript.ru/forum/events/77969-kak-sozdat-smenu-nomera-bloka.html)

Aruta 08.07.2019 07:04
Как создать смену номера блока?
 
Есть страница, на которой строки меняются местами с соседними строками при нажатии на кнопку вверх/вниз

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 именно и перемещение и смену порядкового номера, то буду признателен такому коду:)

рони 08.07.2019 08:10
Aruta,
а поставить номер через css?
https://javascript.ru/forum/misc/741...tml#post487617

рони 08.07.2019 09:00
смена соседних блоков
 
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 09.07.2019 06:19
Спасибо за подсказку! Но при переносе на сайт почему-то срабатывала смена через 1 номер.
1 с 3, вместо 1 со 2
2 с 4, вместо 2 с 3,
5 с 7, вместо 5 с 6
и т.д.

Но спасибо за помощь всё равно:)

Aruta 09.07.2019 06:19
Работает:)

Спасибо огромное:)

Aruta 10.07.2019 07:02
Цитата:
Сообщение от Rise (Сообщение 510055)
У кого через 1, у меня?
Нет. Стёр цитату случайно... простите:)

Aruta 10.07.2019 09:39
Цитата:
Сообщение от Rise (Сообщение 509991)
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);
    });
});

Понимаю, что наглею уже, но как сделать еще и добавление в "id=position" значений?
Т.к. из него потом мне нужно еще эти цифры вытягивать, чтобы при смене позиции блока он оставался там даже после перезапуска браузера.
Если через :after добавлять их, то потом разве можно в LocalStorage записать?

Aruta 11.07.2019 09:32
Цитата:
Сообщение от Rise (Сообщение 510115)
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));
});
Вы - мой кумир в Jquery:) Спасибо огромное!


Часовой пояс GMT +3, время: 13:34.