jQuery UI如何在父级的父级上设置可拖动的包含选项 [英] jQuery UI how to set draggable containment option on parent's parent

问题描述

jQuery UI Draggable交互具有一个很好的属性，用于将容器设置为父母

The jQuery UI Draggable interaction has a nice property for setting the containment as the parent.

$( ".selector" ).draggable({ containment: 'parent' });

我希望将收容措施设置为父母的父母.没有字符串值可以完成此操作，因为字符串选项为

I wish to set the containment as the parent's parent. There is no string value to accomplish this, as string the options are

父母"，文档"，窗口"，[x1，y1，x2，y2]

'parent', 'document', 'window', [x1, y1, x2, y2]

我可以在页面加载时计算父级父级的x1，y1，x2，y2，并使用这些值来设置容器相对于文档的边界.但是，如果在页面加载后调整窗口大小，则容器位置可以相对于父级的父级位置更改.原生的"parent"选项将可拖动元素保留在父元素内，而不管窗口大小如何调整.

I could calculate x1,y1,x2,y2 of the parent's parent at page load and use those values to set boundaries for a container relative to the document. But the container position can change relative to the parent's parent position if the window is resized after page load. The native 'parent' option keeps the draggable element within the parent element regardless of window resizing.

有没有一种方法可以使用父级的父级来完成此可拖动的遏制?

Is there a way to accomplish this draggable containment using the parent's parent? .

推荐答案

根据文档，containment选项也可以是jquery选择器或实际元素.因此，您可以执行以下操作:

As per the documentation, the containment option can also be a jquery selector or an actual element. So you can do this:

$('.selector').draggable({
    containment: $('.selector').parent().parent()
});

甚至更好:

$('.selector').each(function(){
    $(this).draggable({
        containment: $(this).parent().parent()
    });
});

这篇关于jQuery UI如何在父级的父级上设置可拖动的包含选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！