डोजो फ़्लोटिंगपेन

Question

की स्थिति को रोकें मेरे पास एक dojox.layout.FloatingPane (कस्टम डिजीट के रूप में) है जिसे इसके संलग्न div के भीतर कहीं भी रखा जा सकता है। मेरी समस्या यह है कि उपयोगकर्ता संभावित रूप से फ़्लोटिंगपेन को अपने कंटेनर के बाहर खींच सकता है और इसे पुनर्प्राप्त करने में असमर्थ हो सकता है। फ़्लोटिंगपेन को हर समय पूरी तरह से दिखाई देने के लिए मजबूर करने का कोई आसान तरीका है?) FloatingPane की DnD कार्यक्षमता dojo.dnd.Moveable वर्ग के माध्यम से हासिल की है फलक के दशक में instantialized; http://jsfiddle.net/phusick/3vTXW/

और अब कुछ स्पष्टीकरण:

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

सबसे पहले, jsFiddle पर काम कर रहे उदाहरण देखें:

यहाँ मेरी कोड है postCreate विधि। एक डोम नोड

dojo.dnd.boxConstrainedMoveable द्वारा विवश करने के लिए - - समन्वय द्वारा विवश करने के लिए

• dojo.dnd.parentConstainedMoveable:: {एल: 10, टी: 10 FloatingPane के आंदोलन आप के बजाय इन moveables में से एक का उपयोग करना चाहिए विवश करने के लिए , डब्ल्यू: 100, एच: 100}
• dojo.dnd.constrainedMoveable - समन्वय एक प्रदान की समारोह

में गणना की अधिक जानकारी के लिए द्वारा विवश करने के लिए देखने के ऊपर उल्लिखित jsFiddle।

प्रलेखन के अनुसार आप इसे हटाने के लिए Moveable उदाहरण पर destroy() बुलाना चाहिए, लेकिन जैसा कि FloatingPane के मूल Moveable किसी भी वस्तु प्रॉपर्टी को निर्दिष्ट नहीं है, मैं इसे नष्ट नहीं है, मैं सिर्फ एक ही पर उन तीन moveables में से एक का दृष्टांत एक उपवर्ग में डोम नोड:

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

}); 

अब आप dojox.layout.FloatingPane के बजाय ConstainedFloatingPane उपयोग कर सकते हैं:

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