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's the code:

HTML:

<div class="container">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
</div>

JS:

$('.container div').draggable({
    connectToSortable: '.container',
    //How do I drag all selected items?
    helper: function(e, ui) {
        return $('.selected');
    }
});

$('.container').sortable({
    axis: 'y',
    //How do I sort all selected items?
    helper: function(e, ui) {
        return $('.selected');
    }
});

$('.container div').live('click', function(e) {
    $(this).toggleClass('selected');
});

CSS:

body{background-color:#012;font-family:sans-serif;text-align:center;}
div{margin:5px 0;padding:1em;}
.container{width:52%;margin:1in auto;background-color:#555;border-radius:.5em;box-shadow:0 0 20px black;}
.container div{background-color:#333;color:#aaa;border:1px solid #777;background-color:#333;color:#aaa;border-radius:.25em;cursor:default;height:1em;}
.container div:hover{background-color:#383838;color:#ccc;}
.selected{background-color:#36a !important;border-color:#036 !important;color:#fff !important;font-weight:bolder;}

I don't know if I'm headed in the right direction or not. I can't find an example of this anywhere online. Just lots of related questions. Does anyone know how?

For example, if I've selected items 4 and 5 out of a list of 6. I want to be able to drag 4 and 5 to the top of the set to get this order - 4 5 1 2 3 6 - Or if I selected 5 and 1 and drag them to the bottom - 2 3 4 6 1 5

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's the code:

HTML:

<div class="container">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
</div>

JS:

$('.container div').draggable({
    connectToSortable: '.container',
    //How do I drag all selected items?
    helper: function(e, ui) {
        return $('.selected');
    }
});

$('.container').sortable({
    axis: 'y',
    //How do I sort all selected items?
    helper: function(e, ui) {
        return $('.selected');
    }
});

$('.container div').live('click', function(e) {
    $(this).toggleClass('selected');
});

CSS:

body{background-color:#012;font-family:sans-serif;text-align:center;}
div{margin:5px 0;padding:1em;}
.container{width:52%;margin:1in auto;background-color:#555;border-radius:.5em;box-shadow:0 0 20px black;}
.container div{background-color:#333;color:#aaa;border:1px solid #777;background-color:#333;color:#aaa;border-radius:.25em;cursor:default;height:1em;}
.container div:hover{background-color:#383838;color:#ccc;}
.selected{background-color:#36a !important;border-color:#036 !important;color:#fff !important;font-weight:bolder;}

I don't know if I'm headed in the right direction or not. I can't find an example of this anywhere online. Just lots of related questions. Does anyone know how?

For example, if I've selected items 4 and 5 out of a list of 6. I want to be able to drag 4 and 5 to the top of the set to get this order - 4 5 1 2 3 6 - Or if I selected 5 and 1 and drag them to the bottom - 2 3 4 6 1 5

• javascript
• jquery
• jquery-ui
• jquery-ui-sortable

• Added code to question to keep SO self-contained and searchable. – Merlyn Morgan-Graham Commented Dec 14, 2011 at 23:20
• 1 I think this can be a good starting point. The default ordering is not working as required, but maybe you will be able to modify it :). Fiddle is here. Example is here. – kubetz Commented Dec 14, 2011 at 23:33
• @dzejkej Thanks. I saw that before but I was worried about it breaking in future jquery versions so I passed it by. I'm glad you brought it to my attention again. I think it might work after all. If it breaks in the future I will ask you for help though :). – Benjamin Commented Dec 15, 2011 at 0:47
• 2 Thanks @Merlyn. I'll include code from now on. – Benjamin Commented Dec 15, 2011 at 1:02

2 Answers 2

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?

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