Сортировать несколько выбранных элементов в сортировке jQuery? - PullRequest
Новая
       1

Сортировать несколько выбранных элементов в сортировке jQuery?

3 голосов
/ 15 декабря 2011

Я пытаюсь выбрать более одного элемента в сортируемом наборе jQuery, а затем переместить выбранные элементы вместе .

Вот мое слабое начало попытки заставить его работать . И вот код:

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

Я не знаю, направляюсь ли я в правильном направлении или нет. Я не могу найти пример этого в Интернете. Всего лотов из связанных вопросов . Кто-нибудь знает как?

Например, если я выбрал пункты 4 и 5 из списка 6. Я хочу иметь возможность перетащить 4 и 5 в начало набора, чтобы получить этот порядок - 4 5 1 2 3 6 - Или, если я выбрал 5 и 1 и перетащил их вниз - 2 3 4 6 1 5

Ответы [ 2 ]

6 голосов
/ 15 декабря 2011

Это похоже на работу с мультисортируемым плагином . Код ниже. Или см. 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();
    }
});

Но что, если мультисортируемый сломается с будущими версиями jQuery?

0 голосов
/ 16 августа 2014

Изменение моего ответа здесь ( в соответствии с вашими HTML и CSS):

  1. Выбор элементов для сортировки
  2. Создание пользовательского помощника
  3. Скрыть выбранные элементы до тех пор, пока не будет выполнена сортировка
  4. Изменить размер помощника и заполнителя в соответствии с выбором
  5. Вручную отсоединить выбранные элементы от текущей позиции и прикрепитьих на новую позицию после сортировки

  6. Показать скрытые элементы ( отменить шаг 3 ) после шага 5 

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

Обновленная скрипка

...