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

模拟行为。

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

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

1 个答案: