jQuery UI如何在父级父级上设置可拖动包含选项

Question

jQuery UI Draggable交互具有setting the containment作为父级的良好属性。

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

我希望将收容设置为父母的父级。没有字符串值可以实现这一点，因为字符串选项是

  

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

我可以在页面加载时计算父级父级的x1，y1，x2，y2，并使用这些值来设置容器相对于文档的边界。但是，如果在页面加载后调整窗口大小，则容器位置可以相对于父级的父位置进行更改。无论窗口大小调整，本机“父”选项都将可拖动元素保留在父元素中。

有没有办法用父母的父母完成这个可拖动的收容？

Answer 1

根据documentation，containment选项也可以是jquery选择器或实际元素。所以你可以这样做：

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

甚至更好：

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

Answer 2

根据文档，您不必传递containment属性的字符串。你可以传递任何一个：

Selector, Element, String, Array

因此，只需使用jQuery选择父级的父级（即$( ".selector" ).parent().parent()），然后传入而不是'parent'。

Answer 3

如果我使用$(this).parent()，我的元素将遍历父元素。

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

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

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