Sort Multiple Selected Items In Jquery Sortable?

I'm trying to select more than one item in a jQuery sortable set and then move the selected items around together. Here's my weak beginning of an attempt to make it work. And here

Solution 1:

This seems to work with the multisortable plugin. Code below. Or see jsFiddle.

// ctrl + click to select multiple
$('.container').multisortable({
    stop: function(e, ui) {
        var $group = $('.ui-multisort-grouped').not(ui.item);
        $group.clone().insertAfter($(ui.item));
        $group.each(function() {
            $(this).removeClass('ui-multisort-grouped');
        });
        $group.remove();
    }
});

But what if multisortable breaks with future jQuery versions?

Solution 2:

Modifying my answer here (according to your HTML and CSS) :

1. Select items to sort
2. Create a custom helper
3. Hide the selected items until sort is done
4. Resize the helper and placeholder according to the selection
5. Manually detach selected items from the current position and attach them to the new position after sort

6. Show the hidden items (undo step 3) after step5

   $(function () {
     $('.container').on('click', 'div', function () {
       $(this).toggleClass('selected');
     });
   
     $(".container").sortable({
       revert: true,
       helper: function (e, item) {
           if (!item.hasClass('selected')) item.addClass('selected');
           var elements = $('.selected').not('.ui-sortable-placeholder').clone();
           var helper = $('<div/>');
           item.siblings('.selected').addClass('hidden');
           return helper.append(elements);
       },
       start: function (e, ui) {
           var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
           ui.item.data('items', elements);
           var len = ui.helper.children().length;
           var currentHeight = ui.helper.height()
           var itemHeight = ui.item.height() + 32; // 32 = 16x2 padding
           ui.helper.height(currentHeight + (len * itemHeight))
           ui.placeholder.height((len * itemHeight))
       },
       receive: function (e, ui) {
           ui.item.before(ui.item.data('items'));
       },
       stop: function (e, ui) {
           ui.item.siblings('.selected').removeClass('hidden');
           $('.selected').removeClass('selected');
       }
     });
   });
   

Updated Fiddle