Wąska pozycja Dojo FloatingPane

Question

Mam dojox.layout.FloatingPane (jako niestandardowy dijit), który może być umieszczony w dowolnym miejscu w obrębie otaczającego div. Mój problem polega na tym, że użytkownik może potencjalnie przeciągnąć FloatingPane całkowicie poza jego kontener i nie może go odzyskać. Czy istnieje jakiś prosty sposób, aby zmusić FloatingPane do pozostania w pełni widocznym przez cały czas?

Oto mój kod:

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

Przede wszystkim zobacz przykład pracujący w jsFiddle: http://jsfiddle.net/phusick/3vTXW/

a teraz trochę wyjaśnień;) Funkcjonalność DnD z FloatingPane uzyskuje się poprzez dojo.dnd.Moveable klasy instantialized w Pane Metoda postCreate. Aby ograniczyć ruch FloatingPane trzeba zastosować jedną z tych ruchomości Zamiast:

• dojo.dnd.parentConstainedMoveable - aby ograniczyć przez węzeł DOM
• dojo.dnd.boxConstrainedMoveable - aby ograniczyć przez współrzędne: {l: 10, t: 10 , w: 100, H: 100}
• dojo.dnd.constrainedMoveable - aby ograniczyć przez współrzędne obliczone w przewidzianej funkcji

więcej szczegółów patrz wspomniany jsFiddle.

Zgodnie z dokumentacją należy zadzwonić destroy() na Moveable przykład, aby go usunąć, ale jak FloatingPane „s oryginalne Moveable nie jest przypisany do dowolnej właściwości obiektu, nie mam go zniszczyć, po prostu wystąpienia jednego z tych trzech moveables na tym samym węzeł DOM w podklasie:

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

}); 

teraz można użyć ConstainedFloatingPane zamiast dojox.layout.FloatingPane:

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