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

【问题标题】：jQuery UI how to set draggable containment option on parent's parentjQuery UI 如何在父级的父级上设置可拖动的包含选项
【发布时间】：2018-11-26 21:49:41
【问题描述】：

jQuery UI Draggable 交互具有一个很好的属性，即setting the containment 作为父级。

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

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

'父', '文档', '窗口', [x1, y1, x2, y2]

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

有没有办法使用父级的父级来完成这种可拖动的包含？ .

【问题讨论】：

标签： jquery jquery-ui jquery-ui-draggable

【解决方案1】：

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

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

甚至更好：

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

【讨论】：

我尝试为可排序表执行此操作，但 $(this).parent().parent() 不起作用。还有其他建议吗？我的 tbody 中的 TR 是可排序的，我想将它们限制在整个表格中。

【解决方案2】：

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

Selector, Element, String, Array

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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

这也很好用：

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

【讨论】：