如何防止動態生成的具有固定位置的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被完全拖出屏幕？

回答

相關問題