如何防止具有固定位置的动态生成的jQuery可拖动div被完全拖离屏幕？

Question

我正在使用jQuery手风琴和可拖动菜单的组合。

这是示例标记：

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div class="wrapper">
    <h3>One</h3>
    <div>The One</div>
    <h3>Two</h3>
    <div>The Two</div>
    <h3>Three</h3>
    <div>The Three</div>
    <h3>Four</h3>
    <div>The Four</div>
</div>

和js：

jQuery('.wrapper').accordion({
            heightStyle: "content",
            navigation: true, 
            collapsible: true,
            animated: "bounceslide", 
        }).draggable({
            axis: "y",
});

你可以看到样本 jsfiddle在这里

更新小提琴： jsfiddle

所需的最终结果（当前为静态，我想动态实现）： jsfiddle

菜单是动态生成的-我不知道提前会有多少个项目在手风琴中。 有时，包装的总高度会超过文档的总高度，因此我想允许用户使用jQuery可拖动的垂直移动包装。 但是，当前您可以单击并拖动包装div离开屏幕。 我希望能够约束包装器的底部和顶部，以便第一个和最后一个h3元素始终分别显示在屏幕上（包装器div的其余部分隐藏在屏幕之外）

我尝试通过计算包装器的高度并从中减去h3的高度来限制包装器，但无济于事：

var minHeight = jQuery('.wrapper').height() - jQuery('.wrapper h3').height();
var maxHeight = jQuery(document).height() - jQuery('.wrapper h3').height();

将可拖动更改为：

.draggable({
                axis: "y",
         containment: [0, -minHeight, 250, maxHeight]
});

关于如何实现这一点的任何想法？

[编辑]

这是更新的jsfiddle

[编辑2]

似乎我在遏制方面步入正轨...这是使用静态遏制值的最终结果

jsfiddle

基本上使用

 containment: [0, -540, 250,270]

这显示了所需的最终结果行为...现在我要做的就是找出背后的正确数学以使其动态地表现出来

Answer 1

以下使用containment: "window" ，似乎对我有用，但是我不确定它是否正是您要的内容。

jQuery('.wrapper').accordion({
    heightStyle: "content",
    navigation: true,
    collapsible: true,
    animated: "bounceslide", 
}).draggable({
    containment:"window",
});

Answer 2

尝试containment:"body"

小提琴： http : //jsfiddle.net/g4vxL/6/