Jquery - Coalition body border detection

Question

드래그 가능한 메뉴에 문제가 있습니다.

예 http://jsfiddle.net/55VJG/

그것은 finde 작동하지만 내가 right:0px; 또는 buttom:0px;로 드래그 할 때 내 메뉴가 브라우저를 벗어났습니다. 이 문제를 어떻게 해결하겠습니까? css로만이 문제를 해결할 수 있습니까?

HTML

<div id="bar"> 
    Open 
    <div id="menu"> Bookmarks <br /> Misc <br /> Some Stuff </div> 
</div> 

CSS

body { overflow:hidden; } 
#bar { width: 100px; border: 1px solid #000; background-color:#ccc; top:0px; left:0px; position:fixed; } 
#menu { display:none; border: 1px solid #f00; width:200px; height:200px; background-color:#555; } 

JS

$(document).ready(function() 
{ 
    $('#bar').draggable();   

    $("#bar").hover( 
    function() { $('#menu').show(); }, 
    function() { $('#menu').hide(); }); 

}); 

Answer 1

이 옵션을 사용할 필요가 containment: 'document' 페이지의 경계를 벗어나지 않도록하십시오. 또한 메뉴를 트리거하는 요소의 너비는 메뉴 너비와 동일해야합니다.

여기는 forked demo of yours입니다.