It seems weird by using containment & helper property on resizable

It seems weird by using containment & helper property on resizable

Dear all,

I used resizable on my rectangle object, and set the containment & helper attribute to implement my behavior.

When I enlarge my rectangle, I hope it will limited on the block I set in containment.

The helper line will help me to preview the size of rectangle be magnified, and it did restrict my cursor to exceed the border I set. But while I mouse up the resizable rectangle, it will exceed the block I set.

And I do the same action on rectangle that already on the border, it will exceed more than the block size.

It seems the bug for checking the position and size for resizable object on the containment situation with the helper behavior.

Does anyone meet the same problem ?

Thanks

I paste a simple code to show that...
version of jquery-ui : 1.7.2
  1. <html lang="en">
    <head>
        <title>jQuery UI Resizable - Animate</title>
        <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
        <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
        <script type="text/javascript" src="../../ui/ui.core.js"></script>
        <script type="text/javascript" src="../../ui/ui.resizable.js"></script>

        <link type="text/css" href="../demos.css" rel="stylesheet" />
        <style type="text/css">
        #BlockStyle { border : 1px dotted; width : 400px; height : 400px;}
        #resizable { width: 150px; height: 150px; padding: 0.5em; }
        #resizable h3 { text-align: center; margin: 0; }
        .ui-resizable-helper { border: 1px dotted blue; }
        </style>
        
        <script type="text/javascript">
        $(function() {
            $("#resizable").resizable({
                helper : 'ui-resizable-helper',
                containment: 'parent'
            });
        });
        </script>
    </head>

    <body>
    <div class="demo">
        <div id="BlockStyle">
            <div id="resizable" class="ui-widget-content">
                <h3 class="ui-widget-header">Containment</h3>
        </div>
    </div>

    </div>
    </body>
    </html>