Limitar la posición de Dojo FloatingPane

Question

Tengo un dojox.layout.FloatingPane (como un dijit personalizado) que se puede colocar en cualquier parte dentro de su div. Mi problema es que el usuario puede arrastrar el FloatingPane completamente fuera de su contenedor y no poder recuperarlo. ¿Hay alguna manera fácil de forzar a FloatingPane a permanecer completamente visible en todo momento?

Aquí está mi código:

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

En primer lugar, ver el ejemplo de trabajo en jsFiddle: http://jsfiddle.net/phusick/3vTXW/

Y ahora una explicación;) La funcionalidad DnD de FloatingPane se logra a través de dojo.dnd.Moveable clase instantialized en el panel de postCreate método. Para limitar el movimiento de la FloatingPane debe usar uno de estos moveables su lugar:

• dojo.dnd.parentConstainedMoveable - para limitar por un nodo DOM
• dojo.dnd.boxConstrainedMoveable - para restringir por coordenadas: {l: 10, t: 10 , w: 100, h: 100}
• dojo.dnd.constrainedMoveable - para restringir por coordenadas calculadas en una función proporcionada

para más detalles ver antes mencionado jsFiddle.

De acuerdo con la documentación que debe llamar destroy() en Moveable ejemplo para eliminarlo, pero como FloatingPane 's originales Moveable no se asigna a ninguna propiedad del objeto, no destruirlo, acabo de crear una instancia de uno de los tres moveables en el mismo nodo DOM en una subclase:

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()); 
      } 
     }); 
    } 

}); 

ya se puede utilizar en lugar de ConstainedFloatingPanedojox.layout.FloatingPane:

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