How To Drag And Drop Multiple Elements Between Different Tabs

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 G

Solution 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 helperif (!item.hasClass('selected')) item.addClass('selected');
    // clone selected items before hidingvar 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;
}
.connectedSortableli {
  margin: 05px5px5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}
.chbox {
  margin-right: 10px;
}
.selected {
  background: red !important;
}
.hidden {
  display: none !important;
}

<linkhref="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"  /><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script><divid="tabs"><ul><li><ahref="#tabs-1">Nunc tincidunt</a></li><li><ahref="#tabs-2">Proin dolor</a></li></ul><divid="tabs-1"><ulid="sortable1"class="connectedSortable ui-helper-reset"><liclass="ui-state-default"><inputclass="chbox"type="checkbox" />Item 1</li><liclass="ui-state-default"><inputclass="chbox"type="checkbox" />Item 2</li><liclass="ui-state-default"><inputclass="chbox"type="checkbox" />Item 3</li><liclass="ui-state-default"><inputclass="chbox"type="checkbox" />Item 4</li></ul></div><divid="tabs-2"><ulid="sortable2"class="connectedSortable ui-helper-reset"></ul></div></div>

---

Updated Fiddle