jQuery UI Сортируемый: выбор нескольких элементов - PullRequest
Новая
       28

jQuery UI Сортируемый: выбор нескольких элементов

3 голосов
/ 12 ноября 2009

Я бы хотел (через оператора клавиатуры) выбрать несколько элементов в неупорядоченном списке и перетащить их в другую точку в том же списке с помощью jQuery Sortable.

1 Ответ

2 голосов
/ 16 августа 2014
  1. Выберите элементы для сортировки
  2. Создание пользовательского помощника
  3. Скрыть выбранные элементы, пока сортировка не будет сделана
  4. Изменить размер заполнителя в соответствии с выбором
  5. Вручную отсоединить выбранные элементы от текущей позиции и прикрепить их к новой позиции после сортировки
  6. Показать скрытые элементы ( отменить шаг 3 ) после шага 5

Вот как я это сделал ( Изменение моего ответа на этот вопрос ): 

$(function() {
  $('ul').on('click', 'li', function() {
    $(this).toggleClass('selected');
  });

  $("ul").sortable({
    revert: true,
    helper: function(e, item) {
      if (!item.hasClass('selected')) item.addClass('selected');
      var elements = $('.selected').not('.ui-sortable-placeholder').clone();
      var helper = $('<ul/>');
      item.siblings('.selected').addClass('hidden');
      return helper.append(elements);
    },
    start: function(e, ui) {
      var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
      ui.item.data('items', elements);
      var len = ui.helper.children().length;
      var height = ui.item.height() + 5;
      ui.helper.height((len * height))
      ui.placeholder.height((len * height))
    },
    receive: function(e, ui) {
      ui.item.before(ui.item.data('items'));
    },
    stop: function(e, ui) {
      ui.item.siblings('.selected').removeClass('hidden');
      $('.selected').removeClass('selected');
    }
  });

});
* {
  margin: 0;
  padding: 0;
}
#sortable {
  width: 300px;
  padding: 5px;
  margin-right: 100px;
  background: #eee;
  border: 1px solid black;
}
ul li {
  width: 250px;
  margin: 5px;
  padding: 5px;
  font-size: 1.2em;
  cursor: move;
  background-color: white;
  list-style-type: none;
}
.selected {
  background: red !important;
}
.hidden {
  display: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<ul id="sortable">
  <li>Item #1</li>
  <li>Item #2</li>
  <li>Item #3</li>
  <li>Item #4</li>
  <li>Item #5</li>
</ul>

( Выберите несколько элементов, щелкнув по каждому из них в демоверсии )

...