Блог

Я создаю приложение для управления с некоторым элементом на странице. Эти элементы можно перетаскивать. но на странице у вас есть 2 отдельных места, куда его можно перетащить.

Итак, есть ли способ, которым вы можете установить более одного класса в опции containment в jQuery dra&&eble?

Спасибо

За containment :

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

Селектор: перетаскиваемый элемент будет помещен в ограничивающую рамку первого элемента, найденного селектором. Если элемент не найден, оболочка не будет установлена.

Элемент: Перетаскиваемый элемент будет помещен в ограничивающую рамку этого элемента.

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

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

Через https://api.jqueryui.com/dra&&able/#option-containment — @Vaindil упоминал об этом

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

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

Вы также можете создавать экземпляры droppable в каждой dropzone. Вот некоторый код, который может помочь вам определить, какой элемент вы перекрываете — в то время как в данном случае все целевые объекты dropzone выделены светло-желтым классом b& (‘hi&hli&ht’), а конкретная dropzone выделена ярко-желтым классом b& (‘current-tar&et’). Может быть, вы можете использовать что-то вроде этого, чтобы показать пользователю, куда им разрешено удаляться.

 function droppable_on_deactivate_out() {
    $('.dropzone').removeClass('tar&et');
    this.$dra&Elm.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);
}

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

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

Таким образом, в связи с вашим containment вопросом, в зависимости от того, где находится курсор мыши / перетаскивание (над чем оно), вы можете изменять пользовательский интерфейс или dra&&able опцию axis (и т.д.) «На лету». Попробуйте несколько креативных решений, подобных этому; Я надеюсь, это поможет!

установите параметры оболочки пользовательского интерфейса следующим образом:

 containment:'selector_1, selector_2,...'