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

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

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