jquery ui 的 resizable 如何限制子.col不超出父.box?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.js"></script> <script type="text/javascript"> function my_resizable(){ $(".col").resizable({ handles:"e" }); } $(function(){ my_resizable(); }); </script> <link href="http://jqueryui.com/themes/base/jquery.ui.resizable.css" type="text/css" rel="stylesheet"/> <style type="text/css"> .box{wdith:500px;height:200px;border:1px solid black;} .col{width:60px;height:100%;background-color:tan;float:left;border:1px solid red;} </style> <div class="box"> <div class="col"></div> <div class="col"></div> </div>
 提示：您可以先修改部分代码再运行

复制内容到剪贴板

代码:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.js"></script>
<script type="text/javascript">
    function my_resizable(){
        $(".col").resizable({
            handles:"e"
        });
    }
    $(function(){
        my_resizable();
    });
</script>
<link href="http://jqueryui.com/themes/base/jquery.ui.resizable.css" type="text/css" rel="stylesheet"/>
<style type="text/css">
    .box{wdith:500px;height:200px;border:1px solid black;}
    .col{width:60px;height:100%;background-color:tan;float:left;border:1px solid red;}
</style>
<div class="box">
    <div class="col"></div>
    <div class="col"></div>
</div>