Constrain a moveable object in Dojo

问题

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?

回答1:

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

来源：https://stackoverflow.com/questions/11842106/constrain-a-moveable-object-in-dojo

标签

dojo