jQuery Multiselect 可拖动/可排序答案

【问题标题】：jQuery Multi-Select Dragable / SortablejQuery Multiselect 可拖动/可排序
【发布时间】：2016-11-09 16:13:56
【问题描述】：

我正在开发一个拖放页面，该页面允许用户从源列表中选择字段并将它们拖放到他们选择的目标列表中。

虽然此功能在较高级别上运行，但我正在尝试通过允许同时选择和移动多个字段来改善体验。

可排序：

$('#in_available_fields').sortable({
connectWith: '.sortable-list',
placeholder: 'placeholder',
start: function(event, ui) {
  if (!$(ui.item).hasClass("allowPrimary")) {
    $(".primaryPanel").removeClass('panel-primary').addClass("panel-danger");
  }
  if (!$(ui.item).hasClass("allowSecondary")) {
    $(".secondaryPanel").removeClass('panel-primary').addClass("panel-danger");
  }
  if (!$(ui.item).hasClass("allowExport")) {
    $(".exportPanel").removeClass('panel-primary').addClass("panel-danger");
  }
  checkFields()
},
....

拖放区：

 // Enable dropzone for primary fields
  $('.primaryDropzone').sortable({
    connectWith: '.sortable-list',
    placeholder: 'placeholder',
    receive: function(event, ui) {
      // If we dont allow primary fields here, cancel
      if (!$(ui.item).hasClass("allowPrimary")) {
        $(ui.placeholder).css('display', 'none');
        $(ui.sender).sortable("cancel");
      }
    },
    over: function(event, ui) {
      if (!$(ui.item).hasClass("allowPrimary")) {
        $(ui.placeholder).css('display', 'none');
      } else {
        $(ui.placeholder).css('display', '');
      }
    },
   ....

我的想法是，为了让用户清楚，可以在每个字段的标签前添加一个复选框。这样他们可以一次检查多个，然后当他们拖动它们时，它会移动所有选定的。

对解决此问题的最佳方法有什么想法吗？我很难通过拖放来做到这一点，我有点不确定如何为此提供多选功能。

小提琴：https://jsfiddle.net/839rvq2k/

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-sortable

【解决方案1】：

你可以参考这个fiddle库here的多分类功能

扩展 jQueryUI 可排序以允许选择和排序多个元素https://github.com/shvetsgroup/jquery.multisortable

JS：

  $(function(){ $('ul.sortable').multisortable(); });

HTML：

<h2>List 1</h2>
    <ul id="list1" class="sortable">
        <li>Item 11</li>
        <li>Item 12</li>
        <li class="child">Item 12a</li>
        <li class="child">Item 12b</li>
        <li>Item 13</li>
        <li>Item 14</li>
        <li>Item 15</li>
        <li>Item 16</li>
        <li>Item 17</li>
        <li>Item 18</li>
        <li>Item 19</li>
    </ul>

【讨论】：