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
– Merlyn Morgan-Graham, Commented Dec 14, 2011 at 23:20
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
– 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
– Benjamin, Commented Dec 15, 2011 at 0:47

Benjamin · Accepted Answer · 2011-12-15 00:41:11Z

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, 2011 at 0:41

Benjamin

3,2647 gold badges41 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kubetz Over a year ago

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!

Marius Over a year ago

That plugin has been unmaintained, and forked here github.com/iamvery/jquery.multisortable

Community · Accepted Answer · 2017-05-23 10:28:01Z

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

Collectives™ on Stack Overflow

Sort multiple selected items in jQuery sortable?

2 Answers 2

2 Comments

Updated Fiddle

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related