问题描述:

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

网友答案:

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

相关阅读:
Top