Установить более одного содержимого в jQuery Draggable - PullRequest
Новая
       36

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

1 голос
/ 06 апреля 2011

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

Так есть ли способ, которым вы можете установить более одного класса в опции сдерживания jQuery draggeble?

Спасибо

Ответы [ 2 ]

0 голосов
/ 24 августа 2016

Per containment:

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

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

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

String: возможные значения: «родитель», «документ», «окно».

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

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

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

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

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

0 голосов
/ 06 апреля 2011

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

containment:'selector_1, selector_2,...'
...