Jquery - 联盟身体边界检测

Question

我有一个可拖动菜单的问题。

示例 http://jsfiddle.net/55VJG/

它有效，但当我将其拖到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。