jQuery Multi-Select Dragable / Sortable

Question

I am working on a drag & drop page which allows a user to pick fields from a source list and drop them in their choice of a destination list.

While this functionality is working on a high level, I am trying to make the experience a little better by allowing for multiple fields to be selected at the same time and moved.

Sortable:

$('#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()
},
....

Dropzone:

 // 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', '');
      }
    },
   ....

My thought, to make it clear to users would be to add a checkbox before the label on each field. This way they could check multiple at one time and then when they drag them over, it would move all of the selected ones.

Any thoughts on the best way to approach this? I struggled to get this far with the drag and drop and I am a little unsure on how to come up with a multi-select feature for this.

Fiddle: https://jsfiddle.net/839rvq2k/

Answer 1

You can refer to this fiddle for the multisortable feature of library here

Extends jQueryUI sortable to allow selection and sorting of multiple elements 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>