Dojo FloatingPane的限制位置 [英] Constrain position of Dojo FloatingPane

问题描述

我有一个dojox.layout.FloatingPane（作为一个自定义dijit），可以放置在其包围的div内的任何位置。我的问题是用户可能会将FloatingPane完全拖动到其容器外部，无法检索它。有没有什么简单的方法来强制浮动空间始终保持完全可见？

这是我的代码：

  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。 
初始化：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）; 
 
 thi s.initialised = TRUE; 
 
 floatingPane.startup（）; 
} 
 
}）; 
  

解决方案

首先，请参阅jsFiddle的工作示例： http://jsfiddle.net/phusick/3vTXW/

现在有一些解释;） FloatingPane 的DnD功能是通过 dojo.dnd.Moveable 类在窗格的 postCreate 方法中实例化。要限制 FloatingPane 的移动，您应该使用其中一个可移动的方法：

• dojo.dnd.parentConstainedMoveable - 由DOM节点限制


• dojo.dnd.boxConstrainedMoveable - 由坐标约束：{l：10，t：10，w：100，h：100}


• dojo.dnd .constrainedMoveable - 由提供的函数计算的坐标限制

有关更多详细信息，请参阅上述< a href =http://jsfiddle.net/phusick/3vTXW/ =noreferrer> jsFiddle 。

根据文档，您应该调用 destroy（） on 可移动实例将其删除，但作为 FloatingPane 的原始可移动不分配给任何对象属性，我不会销毁它，我只是实例化其中一个可移动在同一个DOM节点的子类中：

  var ConstrainedFlo atingPane = 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（））; 
} 
}）; 
} 
 
}）; 
  

现在您可以使用 ConstainedFloatingPane 而不是 dojox.layout.FloatingPane ：

  var floatingPane = new ConstrainedFloatingPane（{
标题：受约束的浮动窗格，
可调整大小：true 
}，searchboxNode）; 
  

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

});

解决方案

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

这篇关于Dojo FloatingPane的限制位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！