Sort multiple selected items in jQuery sortable?

Question

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

Added code to question to keep SO self-contained and searchable. — Merlyn Morgan-Graham, Dec 14 '11 at 23:20
I think [this](http://archive.plugins.jquery.com/project/multisortable) 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](http://jsfiddle.net/dzejkej/CgD8Y/4/). Example is [here](http://www.myphpetc.com/2009/12/jquery-ui-sortable-drag-multiple-to.html). — kubetz, Dec 14 '11 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, Dec 15 '11 at 00:47

score 6 · Answer 1 · answered Dec 15 '11 at 00:41

6

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?

answered Dec 15 '11 at 00:41

Benjamin

3,134
6
36
57

jQuery framework isn't changing API willy-nilly and I'm sure they will provide migration guidelines if something changes, so I won't worry too much about it breaking :). Good job! – kubetz Dec 15 '11 at 01:10
3

That plugin has been unmaintained, and forked here https://github.com/iamvery/jquery.multisortable – Marius Apr 12 '12 at 04:56

score 0 · Answer 2 · edited May 23 '17 at 10:28

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

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

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

Sort multiple selected items in jQuery sortable?

2 Answers2

Updated Fiddle

Linked