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

jQuery UI Draggable交互有一个很好的属性， 可以将包含设置为父包含。

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

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

‘parent’，’document’，’window’，[x1，y1，x2，y2]

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

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

Answer 1

根据文档 ， 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

这也很好：

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