jQuery UIダイアログ

Question

を含むときに問題が発生するため、ダイアログボックスでこの問題を解決しようとしていましたが、コンテナ要素内に正しく表示されていましたが、解決策が見つかりませんでした。

私はダイアログをdiv要素に含めることを試みています。 div要素はダイアログのサイズと同じになり、divはダイアログのサイズ変更を制限します。

今すぐダイアログがdiv内に配置され、divに制限されますが、ドラッグするとダイアログがコンテナの外側に移動します。

$("#dialogtext").dialog({ 
 
    appendTo: "#container", 
 
    autoOpen: true, 
 
    resizable: true 
 

 
}).parent().draggable({ 
 
    containment: '#container' 
 
}).position({ 
 
    my: "left top", 
 
    at: "left top", 
 
    of: "#container" 
 
}); 
 

 
$('#clickMe').click(function() { 
 
    $("#dialogtext").dialog("open"); 
 
}); 
 

 
//$(".ui-dialog").css("position", "initial");

.main { 
 
    width: 90vw; 
 
    height: 60vh; 
 
    background-color: #fff; 
 
    border: 1px solid #eee; 
 
    border-bottom: 1px solid #ddd; 
 
} 
 
#container { 
 
    width: 70%; 
 
    height: 60%; 
 
    max-width: 90%; 
 
    max-height: 80%; 
 
    background-color: red; 
 
}

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0-rc.2/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js"></script> 
 

 
<div class="main"> 
 
    <button id="clickMe">Click Me</button> 
 

 
    <div id="container"> 
 
    <div id="dialogtext">hello world! 
 
    </div> 
 
    <!-- dialog text --> 
 

 

 
    </div> 
 
    <!-- container --> 
 
</div> 
 
<!-- main -->

JSFiddle

Answer 1

あなたはdiv要素の幅と高さを計算し、実際にその

$("#dialogtext").dialog({ 
    appendTo: "#container", 
    autoOpen: true, 
    height :$('#container').height(), 
    width :$('#container').width(), 
    resizable: true 

}).resizable({ 
    alsoResize: "#container", // Resize the container 
    containment: "#container" // Contain the resize to be in the container 
}); 

https://jsfiddle.net/bqsd7Luk/8/

Answer 2

あなたは、あなたがfalseにサイズ変更可能な設定されていない、なぜこれをしたい場合は、「ダイアログのサイズ変更を制限」したいと言いましたか？

JS