如何在父元素的父元素上设置jQuery UI中可拖动（draggable）选项的约束（containment）？

Question

jQuery UI Draggable交互具有一个很好的属性，可以将限制范围设置为其父级。

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

我希望将 containment 设置为父级的父级。没有字符串值可以实现此操作，因为选项只有 'parent'、'document'、'window' 和 [x1, y1, x2, y2]。

我可以在页面加载时计算父级的父级的 x1、y1、x2 和 y2 的值，并使用这些值来设置相对于文档的容器边界。但是如果在页面加载后调整窗口大小，容器位置相对于父级的父级位置可能会发生变化。原生的 'parent' 选项可以使可拖动元素保持在父元素内，无论窗口调整大小。

有没有办法使用父级的父级来实现这种可拖动的 containment？

- steampowered

Answer 1

根据文档，containment选项也可以是jQuery选择器或实际元素。因此，您可以这样做：

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

或者更好的做法：

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

- rossipedia

---

我尝试对可排序表格进行此操作，但是$(this).parent().parent()无法工作。还有其他建议吗？我的tbody中的TR是可排序的，我希望限制它们只在整个表内移动。 - Eric K

Answer 2

根据文档，containment属性不一定需要传入字符串。可以传入以下任何内容之一：

Selector, Element, String, Array

因此，只需使用jQuery选择父元素的父元素（即$( ".selector" ).parent().parent()），并将其传递而不是'parent'。

- wsanville

Answer 3

如果我使用 $(this).parent()，我的元素会超出父元素。

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

但是使用parent时它可以正常工作。

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

- Druta Ruslan

Answer 4

这也可以正常工作：

$('.selector').draggable({
    containment: "#parent",
    scroll: false
});

- LABASTIE François