Question

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?

Here’s my 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();
}

});

Answer 1

First of all, see the working example at jsFiddle: http://jsfiddle.net/phusick/3vTXW/

And now some explanation;) The DnD functionality of FloatingPane is achieved via dojo.dnd.Moveable class instantialized in pane’s postCreate method. To constrain the movement of the FloatingPane you should use one of these moveables instead:

• dojo.dnd.parentConstainedMoveable – to constrain by a DOM node
• dojo.dnd.boxConstrainedMoveable – to constrain by co-ordinates: {l: 10, t: 10, w: 100, h: 100}
• dojo.dnd.constrainedMoveable – to constrain by co-ordinates calculated in a provided function

For more details see aforementioned jsFiddle.

According to documentation you should call destroy() on Moveable instance to remove it, but as FloatingPane‘s original Moveable is not assigned to any object property, I do not destroy it, I just instantiate one of those three moveables on the same DOM node in a subclass:

var ConstrainedFloatingPane = dojo.declare(dojox.layout.FloatingPane, {

    postCreate: function() {
        this.inherited(arguments);
        this.moveable = new dojo.dnd.move.constrainedMoveable(this.domNode, {
            handle: this.focusNode,
            constraints: function() {
                return dojo.coords(dojo.body());
            }
        });
    }

});

Now you can use ConstainedFloatingPane instead of dojox.layout.FloatingPane:

var floatingPane = new ConstrainedFloatingPane({
    title: "A Constrained Floating Pane",
    resizable: true
}, searchboxNode);