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

我正在使用jQuery手风琴和可拖动菜单的组合。如何防止动态生成的具有固定位置的jQuery可拖动div被完全拖出屏幕？

这里的样品标记：

<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 here~~

更新小提琴：jsfiddle

期望的最终结果（目前静态，我想实现它动态地）：jsfiddle

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

我尝试使用包容

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

改变拖动到：通过计算包装的高度和距离，但无济于事减去H3的高度限制包装

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

任何想法如何我实现这个？

[编辑]

下面是更新jsfiddle

[编辑2]

看来我是在正确的轨道与遏制的......下面是使用静态遏制最终的结果值

jsfiddle

基本上都采用

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

这表明所需的最终结果的行为...现在我需要做的是找出正确的数学背后使它这样的表现动态

来源

2014-01-16 zoranc

'遏制： “文件”'??? http://jsfiddle.net/g4vxL/1/ –

为什么不把我的手机放在一个带有overflow-y：div的div中，忘记可拖动？ –

@A。 Wolff如果手风琴中有太多的元素，我将无法使用这个来获得底部的元素...这就是为什么我需要移动包装的顶部，所以只有最后一个h3元素和关联的div显示 – zoranc

下面是使用containment: "window"并似乎为我工作，但我不知道它是否正是你正在寻找。

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

来源

2014-01-16 21:37:46 Craighead

刚刚看到A.沃尔夫的答案和你的回答 - 对此感到抱歉。 – Craighead

没有问题，感谢您花时间看看:) – zoranc

是否iframeFix：真的适合您吗？ [JSFidle]（http://jsfiddle.net/g4vxL/3/）当鼠标返回到屏幕时，这会使div保持“焦点”。 – Craighead

尝试containment:"body"

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

来源

2014-01-17 14:12:18 iambriansreed

在这种情况下不起作用...请查看此更新[jsfiddle]（http://jsfiddle.net/g4vxL/2/ ）比我最初发布的jsfiddle更能反映我的情况 – zoranc

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

回答

相关问题