在 jQuery Draggable 中设置多个容器答案

【问题标题】：Set more than one containment in jQuery Draggable在 jQuery Draggable 中设置多个容器
【发布时间】：2011-04-06 09:39:22
【问题描述】：

我正在创建一个页面上有一些元素的管理应用程序。这些元素可以拖动。但在页面中，您有 2 个可以拖动的单独位置。

那么有没有一种方法可以在 jQuery draggeble 的包含选项中设置多个类？

谢谢

【问题讨论】：

标签： javascript jquery jquery-ui jquery-plugins draggable

【解决方案1】：

设置 ui 包含选项，如下所示：

containment:'selector_1, selector_2,...'

【讨论】：

这是不正确的，并且根本不是遏制属性的预期功能。 Here's the API reference.
Vaindil，我同意 - 来自 API 文档：支持的包含类型：... 字符串：可能的值：“父”、“文档”、“窗口”。

【解决方案2】：

每containment：

支持多种类型：

选择器：可拖动元素将包含在选择器找到的第一个元素的边界框内。如果没有元素找到，不会设置收容措施。

元素：可拖动元素将包含在该元素的边界框内。

字符串：可能的值：“父”、“文档”、“窗口”。

数组：定义边界框的数组，格式为 [ x1, y1, x2, y2 ]。

通过https://api.jqueryui.com/draggable/#option-containment - @Vaindil 提到了这一点

以下是关于 jQuery UI sortable 不直接支持的“多个包含选择器”的“创造性”答案。这是一个可能有帮助的“想法”；在实践中它为我的应用做了：

您可以使用 Selector 或 Element （见上文） 模式设置containment，并使用更高级别的父元素；不仅意味着实际的“父级”，而且可能是一些更高的 DOM 元素。（如果您使用的是sortable，则可以将两者连接起来。）然后使用draggable 方法over 来确定您是否在dropzone 上。

您还可以在每个 dropzone 上实例化 droppable。这里有一些代码可以帮助您确定您结束的元素 --- 而这是用浅黄色 bg 类（'highlight'）突出显示所有 dropzone 目标，并且特定的 dropzone 用亮黄色 bg 类（'当前目标'）。也许您可以使用类似的方法向用户显示他们可以在哪里放下。

function droppable_on_deactivate_out() {
    $('.dropzone').removeClass('target');
    this.$dragElm.removeClass('over-outermost-parent');
    this.$sortableElm.sortable('option', {
        connectWith: this.activateConnectWith,
        axis: 'y',
        tolerance: 'pointer'
    });
    $(this).off('mousemove.droppableNamespace mouseout.droppableNamespace');  // Cleanup listeners
    self.showGrid.tbody.animate({scrollTop: this.scrollBackTo}, 250);
}

$('.draggable').draggable({
    // Or you could instantiate `sortable` instead of this `draggable` fn
});

$('#outermost-parent').droppable({
    accept: '.draggable',
    activate: function (droppableActivateEvent, ui) {
        this.$dragElm = $(ui.draggable.context);
        this.activateConnectWith = this.$dragElm.sortable('option', 'connectWith');
    },
    deactivate: droppable_on_deactivate_out,
    over: function () {
        $(this).on('mousemove.droppableNamespace', function (mousemoveEvent) {
            $(mousemoveEvent.target)
                .addClass('current-target')
                .on('mouseout.droppableNamespace', function () {
                    $(this)
                        .removeClass('current-target')
                        .off('mousemove.droppableNamespace mouseout.droppableNamespace');  // Cleanup listeners
                });
        });
        $('.dropzone').addClass('target');
        this.$dragElm
            .addClass('over-outermost-parent');  // Indicate something on UI
            .sortable('option', {
                connectWith: '#outermost-parent',
                axis: false,
                tolerance: 'intersect'
            });
    },
    out: droppable_on_deactivate_out
});

因此与您的containment 问题相关，根据鼠标/拖动的位置（它结束的位置），您可以更改 UI 或 draggable 选项 axis （等）在-飞。尝试一些这样的创造性解决方案；希望对你有帮助！

【讨论】：