Question

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

那么有没有办法在jQuery draggeble的containment选项中设置多个类？

由于

Answer 1

设置如下的ui包含选项：

containment:'selector_1, selector_2,...'

Answer 2

每containment：

支持多种类型：

选择器：可拖动元素将包含在选择器找到的第一个元素的边界框中。如果没有元素   发现，不会设置遏制。

元素：可拖动元素将包含在此元素的边界框中。

字符串：可能的值：“parent”，“document”，“window”。

数组：定义[x1，y1，x2，y2]形式的边界框的数组。

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

以下是jQuery UI sortable未直接支持的“多个包含选择器”的“创意”答案。这是一个可能有帮助的“想法”;在实践中，它为我的应用程序做了：

您可以使用Selector或Element （见上文）模式设置containment更高级别的父元素;意思不仅仅是实际的“父”，而是一些DOM元素更高的东西。（如果您使用的是sortable，则可以将这两者联系起来。）然后使用draggable方法over确定您是否在丢弃区域。

您还可以在每个dropzone上实例化droppable。这里有一些代码可以帮助你确定你所在的元素 - 而这是突出显示所有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（等）即时。试试这样的创意解决方案;我希望它有所帮助！

在jQuery Draggable中设置多个包含

2 个答案: