Реализация захвата нескольких элементов в сортируемой функции (JQuery) - PullRequest
Новая
       10

Реализация захвата нескольких элементов в сортируемой функции (JQuery)

0 голосов
/ 15 октября 2018

Я не знаю, почему эта сортируемая функция не может дать мне желаемый результат: захват и удаление выбранных нескольких элементов в моем сортируемом списке.

Мой код выглядит следующим образом: 

setUsersList() {
  $('ul').on('click', 'li', function (e) {
    if (e.ctrlKey || e.metaKey) {
      $(this).toggleClass("selected");
    } else {
      $(this).addClass("selected").siblings().removeClass('selected');
    }
  });

    $('.users-list').sortable({
        items: "li:not(.to-resize)",
        connectWith: '.users-list',
        placeholder: 'placeholder',
        helper: function (e, item) {
            var elements = item.parent().children('.selected:not(.to-resize)').clone(); //there are other elements in between which I don't want to select, that's why I'm using 'not' selector, elements gives the proper and desired output of all selected items
            item.data('multidrag', elements).siblings('.selected').remove();
            var helper = $('<li/>');
            return helper.append(elements);
        },
        stop: function (e, ui) {
            var elements = ui.item.data('multidrag');
            ui.item.after(elements);
  }
    });
    $('.users-list').disableSelection();
}

Когда я отбрасываю несколько выбранных элементов, я копирую один из них (например, первый удаляется, как и ожидалось,второй скопирован). Как я могу это исправить?

1 Ответ

0 голосов
/ 17 октября 2018

Я заметил некоторые синтаксические ошибки в вашем коде.Это может быть связано с тем, что это только частичный пример.

Вы можете добавить данные к своему помощнику или просто скрыть элементы в движении и затем переместить их на новую позицию после stop.Вот пример последнего: 

$(function() {

  function setUsersList() {
    $('ul.sortable').on('click', 'li', function(e) {
      if (e.ctrlKey || e.metaKey) {
        $(this).toggleClass("selected");
      } else {
        $(this).addClass("selected")
          .siblings().removeClass('selected');
      }
    });

    $('.users-list').sortable({
      items: "> li:not(.to-resize)",
      connectWith: '.users-list',
      helper: function(e, item) {
        var list = item.parent();
        var elements = $('.selected:not(.to-resize)', list);
        if (elements.length === 0) {
          return item;
        }
        elements.addClass("move-hide");
        var helper = $('<li>', {
          class: "ui-state-default",
          style: "width: 178px"
        });
        helper.text(elements.length + " Users");
        return helper;
      },
      stop: function(e, ui) {
        var list = $(this);
        var elements = $(".move-hide", list);
        elements.each(function(ind, el) {
          ui.item.before($(el));
        });
        $(".move-hide", list).removeClass("move-hide selected");
      }
    });
    $('.users-list').disableSelection();
  }
  setUsersList();
});
.sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
}

.sortable li {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  height: 1.5em;
}

.sortable li.selected {
  border-color: red;
}

.sortable li.move-hide {
  display: none;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="users-list-1" class="sortable users-list">
  <li class="ui-state-default">User 1</li>
  <li class="ui-state-default">User 2</li>
  <li class="ui-state-default">User 3</li>
  <li class="ui-state-default">User 4</li>
  <li class="ui-state-default">User 5</li>
  <li class="ui-state-default">User 6</li>
  <li class="ui-state-default">User 7</li>
</ul>

По-прежнему существуют некоторые логические проблемы, например, если пользователь щелкает мышью для перетаскивания одного элемента, это создает mousedown, drag,drop, mouseup серия событий.Что происходит, так это то, что сортировка завершается для одного элемента списка, и затем по этому элементу запускается щелчок.

У вас также нет возможности отменить выбор элементов.Вы можете добавить это.

Надеюсь, это поможет.

...