How to have a jQuery dialog stay inside a div -


i have tried dialog (#dialog) stay inside container div (#dialogcontainer), i.e. don't want possible drag dialog outside boundaries of container div in ui, no success. thought "appendto" setting fix this, not. appreciated!

here example shows indeed possible: https://jqueryui.com/dialog

code:

<div id="dialogcontainer" style="width:600px;height:500px;border:1px solid blue;"></div> <div id="dialog" title="dialog title">     dialog content. </div>  <script type="text/javascript">      $(document).ready(function () {         $("#dialog").dialog({             position: {                 my: 'left top',                 at: 'left',                 of: $('#dialogcontainer')             },             draggable: true,             appendto: "#dialogcontainer",             modal:true         });     });  </script> 

you can use following code restrict dialog can't dragged outside container:

$("#dialog").dialog({     ... }) .parent().draggable({     containment: '#dialogcontainer' }); 

see here fiddle.


Comments

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -