在Dojo中约束可移动对象

首先，已经有了一个问题/答案：

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

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

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

---

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

您需要重写

post-create

方法，而不是

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