@retr0

Как реализовать сортировку списка на jQuery?

У меня есть следующий код, который анимирует список таким образом, что бы элемент по которому кликнули переместился вверх списка:

/*elem.target - элемент внутри li, по которому кликнули
data-clicked - атрибут, в котором записано текущее состояние элемента (Кликнут или нет)*/

          $(elem.target).attr('data-clicked', 'on');

          let $myLi = $($(elem.target)).parent();
          let listHeight = $(`[data-id=aside-ul]`).innerHeight();
          let elemHeight = $myLi.height();
          let elemTop = $myLi.position().top;
          let moveUp = listHeight - (listHeight - elemTop);
          let moveDown = elemHeight;
          let liId = $myLi.attr("id");
          let enough = false;
          let liHtml = $myLi.outerHTML();

          $(`[data-id=liel]`).each( (index, el) => {
            if ($(el).attr('id') == liId) {
              return false;
          } else {
            $(el).animate({"top": '+=' + moveDown}, 380);
          }
          });
    
          $myLi.animate({"top": '-=' + moveUp}, 380, function() {
            $myLi.remove();
            let oldHtml = $(`[data-id=aside-ul]`).html();
            $(`[data-id=aside-ul]`).html(liHtml + oldHtml);
            $(`[data-id=liel]`).attr("style", "");
//Вешаем новый listener 
            $(`[data-id=fav-star]`).on('click', (el) => {
              
              if ( $(el.target).data('clicked') == 'on') {
                asideOrderBack(el); /*- вызов функции обратной анимации*/
              } else {
                asideOrderAnim(el); - /*вызов этой же функции*/
              }
            });
          });


Как реализовать функцию ( asideOrderAnim() ), которая возвращала бы кликнутый элемент на его прежнюю позицию в списке с анимацией по аналогии с кодом что выше? Это должно быть просто, но я пока не очень силён в анимации У каждого элемента в списке есть атрибут с его порядковым номером. Атрибут data-clicked нужен для того, что бы проверять кликнут ли элемент и в зависимости от его значения должна срабатывать соответствующая анимация.
  • Вопрос задан
  • 61 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы