jQuery多選可拖動/可排序

Question

我在一個拖放頁面上工作，該頁面允許用戶從源列表中選擇字段並將其拖放到目標列表中。

雖然此功能在較高水平上起作用，但我試圖通過允許同時選擇和移動多個字段來使體驗更好一些。

可排序：

$('#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/

Answer 1

您可以參考這個小提琴圖書館的multisortable特征在這里

擴展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>