Пользовательский интерфейс jQuery - сочетание выбора с помощью Draggable

Question

Как говорится в вопросе, я пытаюсь объединить функции Selectable и Draggable пользовательского интерфейса jQuery в работающий интерфейс drag-n-drop, чтобы пользователь мог выбрать несколько divs и переместить эти div в jQuery.Droppables.

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

    $('tr').selectable({
        filter: 'div',
        selected: function(event, ui) {
            $(ui.selected).draggable({
                containment: 'document',
                axis: 'y',
                snap: true,
                snapMode: 'inner',
                revert: 'invalid',
                opacity: 0.8,
                drag: function(e, ui) {
                    $('.ui-selected').css({
                        top : ui.position.top //Y-Axis Only
                    });
                    $('.ui-selected').addClass('ui-draggable-dragging');
                },
                stop: function() {
                    $('.ui-selected').removeClass('ui-selected ui-draggable');
                }
            });
        }
    });

Как вы можете видеть, я пытался добавить известные классы, которые jQueryПользовательский интерфейс добавляет к элементам, которые перетаскивают / выбирают / и т. Д., Но единственный элемент, который, по-видимому, действует как перетаскиваемый элемент, - это тот, на который пользователь нажал (фактически перетаскивает).

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

Кто-нибудь знает, как это сделать или куда идти дальше?

Кроме того, вот jsfiddle , чтобы продемонстрировать именно то, что я имею в виду (и где Я в настоящее время рассматриваю это).Возможно, вам придется изменить размер представления результатов, чтобы все ячейки таблицы имели одинаковую ширину.

Answer 1

Имитация поведения.

1. при выборе нескольких элементов просто отметьте их как выбранные вручную (например, флажок, добавьте собственный стиль и т. Д.)
2. при перетаскивании используйте перетаскиваемый параметр helper для определения пользовательского клона helper : function(){ return "<p>custom item</p>" }, это скроет отдельные предметы. И вы можете настроить, как вы хотите.
3. Пользовательская реализация перетаскивания, которая использует выбранные элементы для добавления в нужное место.