限制Dojo中的可移动对象 [英] Constrain a moveable object in Dojo

问题描述

首先，这里有一个问题/答案：
限制位置的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参数）; 
 this.moveable = new dojo.dnd.move.boxConstrainedMoveable（
 this.domNode，{
 handle：this.focusNode，
 constraints：{
l ：0，
t：20，
w：500，
h：500 
}，
内：true 
} 
）; 
} 
}）; 
}）; 
  

然后我在这里创建对象：

  require（[dojo / dnd / move，dojox / layout / FloatingPane，dashboardFloatingPane，dojo / domReady！]，
 function（move，FloatingPane ，dashboardFloatingPane）{
 
 var widgetNode1 = dojo.byId（widget1）; 
 
 var floatingPane =新dashboardFloatingPane（{
标题：浮动窗格 ，
 resizable：true，
 dockable：false，
 style：position：absolute; top：40px; left：40px; width：160px; height：100px;
} ，widgetNode1）; 
 
 floatingPane.startup（）; 
}）; 
  

但是，再次，我可以随意移动窗格，甚至在设置的框之外。任何想法可以吗？

解决方案

您需要覆盖 postCreate 不在 dojox / layout / FloatingPane 类中的 contructor 。

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

尝试这样：

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

First of all there is a question/answer for this already: Constrain position of Dojo FloatingPane http://jsfiddle.net/phusick/3vTXW/

I used the above to create movable panes and it was working first. Then I created a module with the object and the constrain doesn't work any more, I can move the object out of the window.

I placed the following code in a separate module:

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

Then I create the object here:

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

But again, I can move the pane wherever I want, even outside the box that was set. Any ideas please?

解决方案

You need to override the postCreate method, not the contructor in the dojox/layout/FloatingPane class.

The reason is that the original class sets this.moveable to it's own moveable type, so to override it, you have to reassign it to your constrained moveable afterward.

Try this:

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中的可移动对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！