jquery - 聯盟身體邊界檢測

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。