jQuery UI Sortable:多项目选择 [英] jQuery UI Sortable: Multi-item select

问题描述

我想(通过键盘操作员)在无序列表中选择多个项目，然后使用jQuery Sortable将它们拖到同一列表中的另一点.

I'd like to (via a keyboard operator) select multiple items in an unordered list and drag them to another point in the same list with jQuery Sortable.

推荐答案

1. 选择要排序的项目
2. 创建自定义帮助程序
3. 隐藏所选项目，直到完成排序
4. 根据选择调整占位符的大小
5. 从当前位置手动分离所选项目，并在排序后将其附加到新位置
6. 在第5步之后显示隐藏的项目(撤消第3步)

1. Select items to sort
2. Create a custom helper
3. Hide the selected items until sort is done
4. Resize the placeholder according to the selection
5. Manually detach selected items from the current position and attach them to the new position after sort
6. Show the hidden items (undo step 3) after step5

这就是我的做法(为此 answer .com/questions/23077146/jquery-sortable-drag-and-drop-multiple-items>问题 ):

Here's how I did (Modifying my answer for this question):

$(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>

(通过在演示中单击每个项目来选择多个项目)

这篇关于jQuery UI Sortable:多项目选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！