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

jQuery UI - Combining Selectable with Draggable

本文关键字：拖动 相结合 UI- 可选择 jQuery      更新时间：2023-09-26

正如问题所述，我试图将jQuery UI的Selectable和Draggable功能组合到一个可工作的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');
                }
            });
        }
    });

正如您所看到的，我已经尝试将jQueryUI添加到被拖动/选择的元素等中的已知类添加到其中，但唯一看起来像是实际可拖动的元素是用户单击的元素（实际上是拖动的）。

我的愿望是让用户拖动整个选定的组，并让它们都充当可拖动的对象（即：恢复为无效、捕捉为可丢弃等）

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

此外，这里还有一个jsfiddle来演示我的确切意思（以及我目前在上的位置）。您可能需要调整结果视图的大小，使表格单元格的宽度都相同。

模拟行为。

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