约束 Dojo FloatingPane 的位置

Question

我有一个 dojox.layout.FloatingPane （作为自定义 dijit），它可以放置在其封闭的 div 内的任何位置。我的问题是，用户可能会将 FloatingPane 完全拖到其容器之外，并且无法检索它。有没有什么简单的方法可以强制 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.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 上的工作示例： http://jsfiddle.net/phusick/3vTXW/

现在进行一些解释；）FloatingPane 的 DnD 功能是通过在窗格中实例化的 dojo.dnd.Moveable 类实现的postCreate 方法。要约束 FloatingPane 的移动，您应该使用以下可移动对象之一：

• dojo.dnd.parentContainedMoveable - 通过 DOM 节点进行约束
• dojo.dnd.boxConstrainedMoveable - 通过坐标约束：{l: 10, t: 10, w: 100, h: 100}
• dojo.dnd.constrainedMoveable - 通过在提供的函数中计算的坐标进行约束

有关更多详细信息，请参阅前述 jsFiddle。

根据文档，您应该在 Moveable 实例上调用 destroy() 来删除它，但作为 FloatingPane 的原始 Moveable > 没有分配给任何对象属性，我不会销毁它，我只是在子类中的同一 DOM 节点上实例化这三个 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());
            }
        });
    }

});

现在您可以使用 ContainFloatingPane > 代替dojox.layout.FloatingPane：

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