在 jQuery Draggable 中設置多個容器

Question

我正在創建一個管理應用程序，頁面上有一些元素。 這些元素可以拖動。 但在頁面中，您有 2 個單獨的地方可以拖動它。

那么有沒有一種方法可以在 jQuery draggeble 的包含選項中設置多個類？

謝謝

Answer 1

每個containment ：

支持多種類型：

Selector ：可拖動元素將包含在選擇器找到的第一個元素的邊界框中。 如果未找到元素，則不會設置包含。

Element ：可拖動元素將包含在此元素的邊界框內。

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

Array ：一個數組，以 [ x1, y1, x2, y2 ] 的形式定義邊界框。

通過https://api.jqueryui.com/draggable/#option-containment - @Vaindil 提到了這一點

---

以下是關於 jQuery UI sortable不直接支持的“多個包含選擇器”的“創造性”答案。 這是一個可能有幫助的“想法”； 實際上，它對我的​​應用程序起到了作用：

您可以使用 Selector 或 Element （見上文）模式設置containment更高級別的父元素； 不僅意味着實際的“父”，而且可能是一些更高的 DOM 元素。 （如果您使用sortable ，您可以連接兩個。）然后使用draggable方法over ，以確定如果你是一個懸浮窗。

您還droppable在每個放置區實例化放置對象。 這里有一些代碼可以幫助你確定你在哪個元素上——而這是用淺黃色 bg 類 ('highlight') 突出顯示所有 dropzone 目標和用亮黃色 bg 類懸停的特定 dropzone ('當前目標'）。 也許你可以使用這樣的東西來向用戶展示他們可以放下的地方。

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 （等）。 嘗試一些像這樣的創造性解決方案； 我希望它有幫助！

Answer 2

設置 ui 包含選項，如下所示：

containment:'selector_1, selector_2,...'