Jquery ui выбирается и сортируется в сочетании

Вот что я получил:
http://jsfiddle.net/hashie5/vk6rZ/
(не обращайте внимания на макет)

Первая таблица представляет собой комбинацию второй и третьей таблицы, и она должна быть завершена.

Таблица секунд имеет сортировку (со стрелками).

Третья таблица имеет возможность выбора (не нажимайте стрелки).

Цель: при выборе нескольких элементов вы должны иметь возможность сортировать их все одновременно.

Если это трудно из-за таблиц, пример со списками также будет большим.

В вспомогательной функции я попытался клонировать все выбранные (ui-selected class) элементы, но это было слишком ошибко

EDIT:
Я создал новую скрипку: http://jsfiddle.net/hashie5/AZr9Z/
Это работает хорошо, но не на 100% завершено.

Ответ 1

demo http://so.devilmaycode.it/jquery-ui-selectable-and-sortable-combined/

основной код выглядит следующим образом.

sort : function(event, ui) {
    var $helper = $('.ui-sortable-helper'), hTop = $helper.offset().top, hStyle = $helper.attr('style'), hId = $helper.attr('id');
    if (first_rows.length > 1) {
        $.each(first_rows, function(i, item) {
            if (hId != item.id) {
                var _top = hTop + (26 * i);
                $('#' + item.id).addClass('ui-sortable-helper').attr('style', hStyle).css('top', _top);
            }
        });
    }
},
start : function(event, ui) {
    if (ui.item.hasClass('ui-selected') && $('.ui-selected').length > 1) {
        first_rows = $('.ui-selected').map(function(i, e) {
            var $tr = $(e);
            return {
                tr : $tr.clone(true),
                id : $tr.attr('id')
            };
        }).get();
        $('.ui-selected').addClass('cloned');
    }
    ui.placeholder.html('<td colspan="99">&nbsp;</td>');
},
stop : function(event, ui) {
    if (first_rows.length > 1) {
        $.each(first_rows, function(i, item) {
            $(item.tr).removeAttr('style').insertBefore(ui.item);
        });
        $('.cloned').remove();
        first_rows = {};
    }
    $("#uber tr:even").removeClass("odd even").addClass("even");
    $("#uber tr:odd").removeClass("odd even").addClass("odd");
}

я не уверен, что понял, что вы хотите, так или иначе, что на самом деле делает код:

из первой таблицы выберите несколько элементов;
удерживая наведите один из выбранных элементов;
вы можете перемещать выбранные, когда захотите, в списке;
поддерживает порядок сортировки всех выбранных элементов;

надеюсь, что это то, что вы ищете.

Ответ 2

AFAICT ваш "jsfiddle" работает очень хорошо... но всякий раз, когда я расстраиваюсь jquery-ui, раздражающе настаивая на выборе текста, и что бы он ни делал, я ссылаюсь на этот фрагмент.

// disables text selection on sortable, draggable items 
$( ".sortable" ).sortable();
$( ".sortable" ).disableSelection();

Не уверен, что вы можете просто перевернуть "отключить", чтобы "включить", но там мои $.02. Кроме того, это своего рода хорошая идея, если у кого-то есть хромой браузер/устройство, чтобы определить "неактивный раздел" внутри одного и того же "группового" элемента, чтобы обеспечить "дескриптор" для действия перетаскивания... (например, стрелка стрелки -типы), иначе эти клики могут неумолимо ошибочно восприниматься как намерение выбора/редактирования...

Ответ 3

Gist, созданный Мэтью Андерсеном, отлично работает: https://gist.github.com/mattandersen/9777423

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/cupertino/jquery-ui.css" />

    <style>
        #list {
            list-style: none;
            padding-left: 0;
        }

        #list .sort-handle {
            display: none;
        }

        #list .ui-selected .sort-handle
         {
            display: inline;
            padding: 0 0.5em;
            cursor: pointer;
        }

        li.ui-selected {
            background-color: #8888cc;
            color: white;
            font-weight: bold;
            background-image: none;
        }
        li.ui-selecting {
            background-color: #ccccff;
            color: white;
            background-image: none;
        }

    </style>
</head>
<body>
    <ul id="list">
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 1</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 2</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 3</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 4</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 5</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 6</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 7</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 8</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 9</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 10</li>
    </ul>

    <script>
        $(function() {
            $('#list').selectable({
                cancel: '.sort-handle'
            }).sortable({
                items: "> li",
                handle: '.sort-handle',
                helper: function(e, item) {
                    if ( ! item.hasClass('ui-selected') ) {
                        item.parent().children('.ui-selected').removeClass('ui-selected');
                        item.addClass('ui-selected');
                    }

                    var selected = item.parent().children('.ui-selected').clone();
                    item.data('multidrag', selected).siblings('.ui-selected').remove();
                    return $('<li/>').append(selected);
                },
                stop: function(e, ui) {
                    var selected = ui.item.data('multidrag');
                    ui.item.after(selected);
                    ui.item.remove();
                }
            });
        });
    </script>
</body>

Демо: http://jsfiddle.net/ghaq69b3/

Ответ 4

Я не тестировал это, но вот идея:

Выделите первый список (но не сортируемый) - затем, когда выбор будет завершен, заверните выделение в div и затем сделайте его сортировкой div - таким образом, выбор затем должен перетащить как один.

Ответ 5

$( "#list" )
  .sortable({ handle: ".handle" })
  .selectable()
  .find( "li" )
  .addClass( "ui-corner-all" )
  .prepend( "<div class='handle'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>" );