javascript - How to drag and drop multiple elements between different tabs

Question

I am trying to drag and drop multiple elements between different tabs.

in this jsfiddle, When an item is being dragged, i want to drag all other checked items along with it, like Gmail does when you move several email from inbox to another folder.

I think it is necessary to use ui.helper but i don't have enough skill in query.

following is the code i'm currently working with:

$( "#sortable1, #sortable2" ).sortable().disableSelection();
var $tabs = $( "#tabs" ).tabs();
var $tab_items = $( "ul:first li", $tabs ).droppable({
  accept: ".connectedSortable li",
  hoverClass: "ui-state-hover",
  drop: function( event, ui ) {
    var $item = $( this );
    var $list = $( $item.find( "a" ).attr( "href" ) )
      .find( ".connectedSortable" );
    ui.draggable.hide( "slow", function() {
      $tabs.tabs( "option", "active", $tab_items.index( $item ) );
      $( this ).appendTo( $list ).show( "slow" );
    });
  }
});

Answer 1

After a lot of fiddling, I came up with the following based on my answer here

Basically we save the selected items using data(), Initialize the tabs as droppable() and append the selected items into the sortable on drop event.

$('.connectedSortable').on('click', 'input', function() {
  $(this).parent().toggleClass('selected');
});

$("#sortable1, #sortable2").sortable({
  revert: 0,
  helper: function(e, item) { //create custom helper
    if (!item.hasClass('selected')) item.addClass('selected');
    // clone selected items before hiding
    var elements = $('.selected').not('.ui-sortable-placeholder').clone();
    //hide selected items
    item.siblings('.selected').addClass('hidden');
    return $('<ul/>').append(elements);
  },
  start: function(e, ui) {
    var $elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
    //store the selected items to item being dragged
    ui.item.data('items', $elements);
  },
  stop: function(e, ui) {
    //show the selected items after the operation
    ui.item.siblings('.selected').removeClass('hidden');
    //unselect since the operation is complete
    $('.selected').removeClass('selected');
    $(this).find('input:checked').prop('checked', false);
  }
});

var $tabs = $("#tabs").tabs(),
  $tab_items = $("ul:first li", $tabs).droppable({
    accept: "ul, .connectedSortable li",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
      var $item = $(this),
        $elements = ui.draggable.data('items'),
        $list = $($item.find("a").attr("href")).find(".connectedSortable");
      ui.draggable.show().hide("slow", function() {
        $tabs.tabs("option", "active", $tab_items.index($item));
        $(this).appendTo($list).show("slow").before($elements.show("slow"));

      });
    }
  });

ul {
  list-style-type: none;
}
.connectedSortable li {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}
.chbox {
  margin-right: 10px;
}
.selected {
  background: red !important;
}
.hidden {
  display: none !important;
}

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a>

    </li>
    <li><a href="#tabs-2">Proin dolor</a>

    </li>
  </ul>
  <div id="tabs-1">
    <ul id="sortable1" class="connectedSortable ui-helper-reset">
      <li class="ui-state-default">
        <input class="chbox" type="checkbox" />Item 1</li>
      <li class="ui-state-default">
        <input class="chbox" type="checkbox" />Item 2</li>
      <li class="ui-state-default">
        <input class="chbox" type="checkbox" />Item 3</li>
      <li class="ui-state-default">
        <input class="chbox" type="checkbox" />Item 4</li>
    </ul>
  </div>
  <div id="tabs-2">
    <ul id="sortable2" class="connectedSortable ui-helper-reset"></ul>
  </div>
</div>