Установить более одного содержимого в jQuery Draggable

Per containment:

Поддерживаются несколько типов:

Селектор. Элемент draggable будет содержаться в ограничивающей рамке первого элемента, найденного селектором. Если ни один элемент не является найдено, никакая сдерживающая способность не будет установлена.

Элемент. Элемент draggable будет содержаться в ограничивающей рамке этого элемента.

Строка. Возможные значения: "родительский", "документ", "окно".

Массив: массив, определяющий ограничивающий прямоугольник в форме [x1, y1, x2, y2].

Через https://api.jqueryui.com/draggable/#option-containment - @Vaindil упомянул об этом

Ниже приведен "творческий" ответ, касающийся "множественных селекторов сдерживания", которые напрямую не поддерживаются jQuery UI sortable. Это "идея", которая может помочь; на практике это было для моего приложения:

Вы можете установить containment с помощью режима Selector или Element (см. выше) с родительским элементом более высокого уровня; а не только фактический "родительский", но, возможно, что-то несколько элементов DOM выше. (Если вы используете sortable, вы можете подключить их.) Затем используйте метод draggable over, чтобы определить, находитесь ли вы в dropzone.

Вы также можете создать экземпляр droppable для каждой dropzone. Вот какой код, который поможет вам определить, какой элемент вы закончили, тогда как это выделяет все цели dropzone со светло-желтым классом bg ('highlight'), а конкретная 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, в зависимости от того, где находится мышь/перетаскивание (что закончилось), вы можете изменить пользовательский интерфейс или параметр draggable axis (и т.д.) на лету. Попробуйте такие креативные решения, как это; Надеюсь, это поможет!