javascript - 在 jQuery Draggable 中设置多个包含

Question

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

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

谢谢

Answer 1

每个收容:

Multiple types supported:

Selector: The draggable element will be contained to the bounding box of the first element found by the selector. If no element is found, no containment will be set.

Element: The draggable element will be contained to the bounding box of this element.

String: Possible values: "parent", "document", "window".

Array: An array defining a bounding box in the form [ x1, y1, x2, y2 ].

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

<小时/>

以下是关于 jQuery UI sortable 不直接支持“多个包含选择器”的“创意”答案。这是一个可能有帮助的“想法”；实际上，它对我的​​应用程序确实如此:

您可以使用选择器或元素(见上文)模式以及更高级别的父元素来设置包含；不仅意味着实际的“父级”，还可能意味着更高的一些 DOM 元素。 (如果您使用的是 sortable，则可以将两者连接起来。)然后使用 draggable 方法 over 来确定您是否处于降落区。

您还可以在每个 dropzone 上实例化 droppable。这里有一些代码可以帮助您确定您所在的元素 --- 而这是使用浅黄色背景类(“突出显示”)突出显示所有拖放区目标，并使用亮黄色背景类(“突出显示”)悬停的特定拖放区当前目标')。也许您可以使用类似的东西来向用户显示允许他们放置的位置。

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选项即时轴(等)。尝试一些像这样的创造性解决方案；希望对您有所帮助!