jQuery UI - 将可选择与可拖动相结合

Question

正如问题所述,我正在尝试将jQuery UI Selectable和Draggable函数组合到一个工作的拖放界面中,用户可以选择多个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 UI添加到已拖动/选择/等的元素的已知类,但似乎充当实际可拖动的唯一元素是用户点击的元素(实际上是拖动).

我的愿望是让用户拖动整个选定的组,让它们全部作为可拖动的(即:恢复无效,捕捉到可放置等)

有没有人知道如何做到这一点或从哪里去？

另外,这里有一个jsfiddle来准确地证明我的意思(以及我目前在这里).您可能必须调整结果视图的大小,以使表格单元格的宽度相同.

Answer 1

模拟行为。

1. 选择多个项目时，只需将它们标记为手动选择（例如复选框、添加自定义样式等）
2. 拖动时使用可拖动选项helper定义自定义克隆，helper : function(){ return "<p>custom item</p>" }, 这将隐藏单个项目。并且您可以根据需要进行定制。
3. 自定义放置实现，使用这些选定的项目附加到正确的位置。