고정 된 위치에서 동적으로 생성 된 jQuery draggable 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 : 샘플 jsfiddle here

업데이트 바이올린 볼 수 있습니다

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

: jsfiddle

원하는 최종 결과를 (현재 여기

샘플 마크 업입니다 정적, 그것을 구현하고 싶습니다 동적으로) : jsfiddle

메뉴가 동적으로 생성됩니다. - 얼마나 많은 항목이 아코디언에 미리 들어 있는지 알 수 없습니다. 때로는 전체 래퍼 높이가 전체 문서 높이를 초과하므로 사용자가 jQuery draggable을 사용하여 래퍼를 세로로 이동할 수있게하려고합니다. 그러나 현재 래퍼 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] 
}); 

어떤 아이디어 방법 I 이걸 보완하니?

[EDIT]

은 여기가 ... 여기 정전기 차폐를 이용하여 최종 결과 jsfiddle

[EDIT 2

내가 밀폐와 옳았다 보인다있어으로 업데이트 값

jsfiddle

기본적으로

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

이를 사용 6,는

지금은이 뒤에 올바른 수학을 파악하기 만하면 모든 것이 아래의이 동적으로

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/