Question

首先，对此有一个问题/答案： Constrain position of Dojo FloatingPane http://jsfiddle.net/phusick/3vTXW/

我使用上面的方法来创建可移动的窗格，它首先工作。然后我用对象创建了一个模块，约束不再起作用，我可以将对象移出窗口。

我将以下代码放在一个单独的模块中：

define(["dojo/_base/declare", "dojo/dnd/move", "dojox/layout/FloatingPane"],     function(declare, move, FloatingPane){
return declare("dashboardFloatingPane", FloatingPane, {

constructor: function() {
        this.inherited(arguments);
        this.moveable = new dojo.dnd.move.boxConstrainedMoveable(
            this.domNode, {
                handle: this.focusNode,
                constraints: {
                        l: 0,
                        t: 20,
                        w: 500,
                        h: 500                            
                    },
                within: true
            }
        );                            
    } 
});
});

然后我在这里创建对象：

        require(["dojo/dnd/move", "dojox/layout/FloatingPane", "dashboardFloatingPane", "dojo/domReady!"],
        function(move, FloatingPane, dashboardFloatingPane) {

            var widgetNode1 = dojo.byId("widget1");

            var floatingPane = new dashboardFloatingPane({
                title: "A floating pane",
                resizable: true,
                dockable: false,
                style: "position:absolute;top:40px;left:40px;width:160px;height:100px;"       
                }, widgetNode1);

            floatingPane.startup();
        });

但同样，我可以将窗格移动到我想要的任何地方，甚至在设置的框之外。有什么想法吗？

Answer 1

您需要覆盖postCreate方法，而不是contructor类中的dojox/layout/FloatingPane。

原因是原始类将this.moveable设置为它自己的可移动类型，因此要覆盖它，您必须在之后将其重新分配给受约束的可移动类型。

试试这个：

define(["dojo/_base/declare", "dojo/dnd/move", "dojox/layout/FloatingPane"], function(declare, move, FloatingPane){
  return declare("dashboardFloatingPane", FloatingPane, {

    postCreate: function() {
      this.inherited(arguments);
      this.moveable = new dojo.dnd.move.boxConstrainedMoveable(
        // snip...
      );
    } 
  });
});

在Dojo中约束可移动对象

1 个答案: