1

サイズ変更を#holder幅のすぐ近くに移動すると、サイズ変更は#holder幅よりも広くなる可能性があります。つまり、封じ込め制約は現在有効ではありません。どうすれば正常に動作させることができますか???? どうもありがとう！前提条件：container .overflow：auto; position：relative...などのスタイルを維持する必要があります。何らかの理由で保管する必要があります。

以下はコードです：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Resizable - Constrain resize area</title>
    <link rel="stylesheet" href="http://jqueryui.com//themes/base/jquery.ui.all.css">
    <script src="http://jqueryui.com//jquery-1.8.0.js"></script>
    <script src="http://jqueryui.com//ui/jquery.ui.core.js"></script>
    <script src="http://jqueryui.com//ui/jquery.ui.widget.js"></script>
    <script src="http://jqueryui.com//ui/jquery.ui.mouse.js"></script>
    <script src="http://jqueryui.com//ui/jquery.ui.resizable.js"></script>
     <script src="http://jqueryui.com//ui/jquery.ui.draggable.js"></script>
    <link rel="stylesheet" href="../demos.css">
    <style>
    #container { width: 500px; height: 500px;overflow:auto;position:relative }
    #container h3 { text-align: center; margin: 0; margin-bottom: 10px; }
    #resizable {   width: 150px; height: 150px;left:80px;top:50px;background-color:red;border:2px }
    #resizable, #container { padding: 0.5em; }
    #gap { width: 1000px; height: 1000px; position:absolute;left:0;top:0;  }
    #holder { width: 800px; height: 800px; position:absolute;left:0;top:0;  }
    </style>
    <script>
    $(function() {
        $( "#resizable" ).resizable({
            containment: "#holder"
        });
         $( "#resizable" ).draggable({
            containment: "#holder"
        });

    });
    </script>
</head>
<body>

<div class="demo">
<textarea cols=120 rows=10>dddddddddddddddddddddddd</textarea>
<input type=text value="ddddddddddddddddddddddddd"/>
<div style="width:500px;height:600px">
<div id="container" class="ui-widget-content">
    <h3 class="ui-widget-header">Containment</h3>

    <div id="gap" class="ui-widget-content">
 <div id="holder" class="ui-widget-content">
    </div>
    <div id="resizable"  >
        <h3 class="ui-widget-header">Resizable</h3>
    </div>
    </div>
</div>
</div> 
</div><!-- End demo -->



<div class="demo-description">
<p>Define the boundaries of the resizable area. Use the <code>containment</code> option to specify a parent DOM element or a jQuery selector, like 'document.'</p>
</div><!-- End demo-description -->

</body>
</html>
4

1 に答える 1

0

このコードを実行するにはテーマが必要です。

私のコンピューターでは、変更したばかりです

<link rel="stylesheet" href="../demos.css">

と

<link rel="stylesheet" href="~/Content/ui-lightness_1.8.24/jquery-ui-1.8.24.custom.css" />

そしてそれは揺れる。例として、テーマui-lightness_1.8.24をダウンロードし、それを使用してデモcssを変更し、再試行します。

于 2012-11-16T14:53:36.540 に答える