title: Constrain position of Dojo FloatingPane
body: <p>I have a dojox.layout.FloatingPane (as a custom dijit) which can be positioned anywhere within its enclosing div. My problem is that the user can potentially drag the FloatingPane completely outside of its container and be unable to retrieve it. Is there any easy way to force the FloatingPane to remain entirely visible at all times?</p>
  
  <p>Here's my code:</p>
  
  <pre><code>dojo.provide("ne.trim.dijits.SearchDialog");
  
  dojo.require("dijit._Widget");
  dojo.require("dijit._Templated");
  dojo.require("dojox.layout.FloatingPane");
  
  dojo.declare("ne.trim.dijits.SearchDialog", [dijit._Widget, dijit._Templated], {
  
  templateString: dojo.cache("ne.trim.dijits", "templates/SearchDialog.html"),
  initialised:false,
  floatingPane: null,
  
  postCreate: function() {
      this.init();
  },
  
  init: function() {
      console.debug("SearchDialog.init()", "start");
      if ( this.initialised === false ) {
          this.createSearchDialog();
      }
      //ne.trim.AppGlobals.searchDialog = this;
      console.debug("SearchDialog.init()", "end");        
  },
  
  createSearchDialog: function() {
      var node = dojo.byId('searchbox');  
      floatingPane = new dojox.layout.FloatingPane({
           title: "A floating pane",
           resizable: true, dockable: true, constrainToContainer: true,
           style:   "position:absolute;top:100;right:100;width:400px;height:300px;z-index:100",
      }, node );
  
      this.initialised=true;
  
      floatingPane.startup();
  }
  
  });
  </code></pre>