Javascript.RU

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

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

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

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

Последний раз редактировалось рони, 08.07.2019 в 08:13.
Ответить с цитированием
  #3 (permalink)  
Старый 08.07.2019, 09:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,335

смена соседних блоков
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>

Последний раз редактировалось рони, 08.07.2019 в 09:05.
Ответить с цитированием
  #4 (permalink)  
Старый 08.07.2019, 09:10
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,131

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);
    });
});

Последний раз редактировалось Rise, 08.07.2019 в 09:29.
Ответить с цитированием
  #5 (permalink)  
Старый 09.07.2019, 06:19
Новичок на форуме
Отправить личное сообщение для Aruta Посмотреть профиль Найти все сообщения от Aruta
 
Регистрация: 08.07.2019
Сообщений: 8

Спасибо за подсказку! Но при переносе на сайт почему-то срабатывала смена через 1 номер.
1 с 3, вместо 1 со 2
2 с 4, вместо 2 с 3,
5 с 7, вместо 5 с 6
и т.д.

Но спасибо за помощь всё равно
Ответить с цитированием
  #6 (permalink)  
Старый 09.07.2019, 06:19
Новичок на форуме
Отправить личное сообщение для Aruta Посмотреть профиль Найти все сообщения от Aruta
 
Регистрация: 08.07.2019
Сообщений: 8

Работает

Спасибо огромное
Ответить с цитированием
  #7 (permalink)  
Старый 10.07.2019, 00:42
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,131

Сообщение от Aruta
Но при переносе на сайт почему-то срабатывала смена через 1 номер.
У кого через 1, у меня?
Ответить с цитированием
  #8 (permalink)  
Старый 10.07.2019, 07:02
Новичок на форуме
Отправить личное сообщение для Aruta Посмотреть профиль Найти все сообщения от Aruta
 
Регистрация: 08.07.2019
Сообщений: 8

Сообщение от Rise Посмотреть сообщение
У кого через 1, у меня?
Нет. Стёр цитату случайно... простите
Ответить с цитированием
  #9 (permalink)  
Старый 10.07.2019, 09:39
Новичок на форуме
Отправить личное сообщение для Aruta Посмотреть профиль Найти все сообщения от Aruta
 
Регистрация: 08.07.2019
Сообщений: 8

Сообщение от Rise Посмотреть сообщение
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 записать?
Ответить с цитированием
  #10 (permalink)  
Старый 11.07.2019, 07:45
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,131

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));
});
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как подставить переменные js в ID блока? malsyst Общие вопросы Javascript 4 05.12.2015 12:56
Как создать кнопки для пролистывания McLotos Элементы интерфейса 0 23.08.2014 18:17
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 11:29
Как узнать максимальную высоту блока? frost18 Элементы интерфейса 11 22.10.2013 03:07
как создать елемент с вложеными елементами scuter Events/DOM/Window 11 14.05.2008 15:15