Question

我有一个div，我应用了Dojo dojo / dnd / Moveable。但是，我想阻止用户在屏幕外拖动div。所以，我认为我需要实现dojo / dnd / move / boxConstrainedMoveable。

我从这开始：

var dnd = new Moveable(this.domNode, {
   'handle': this.titleNode
});

这里有一个类似的问题： Constrain a moveable object in Dojo。应用这个答案，我得到这样的结论：

var dnd = new move.boxConstrainedMoveable(
   'handle': this.titleNode
    constraints: {
        l: 0,
        t: 20,
        w: 500,
        h: 500                            
    },
    within: true    
);

但是，我无法理解边界框的工作原理。我只是希望div留在窗口内。我已经尝试使用窗口框，div的边框来实现一些功能。什么都没有用，我所做的一切都是一团糟。

我在这里阅读文档： http://dojotoolkit.org/api/?qs=1.9/dojo/dnd/move.boxConstrainedMoveable

有没有人用Dojo做过这件事？我非常感谢一个例子。

Answer 1

我查了一些旧的代码，我确实实现了这种类型的可移动一次。这是针对Dojo 1.7编写的，所以1.9中的内容可能已经改变。小提琴演示：https://jsfiddle.net/4ev1daqr/26/

您尝试的解决方案与此之间的主要区别在于constraints中的moveable属性需要是函数而不是静态边界框。使用boxConstrainedMoveable模块时，应将静态边界框分配给box属性，而不是constraints属性。

这实际上是一个很好的设计，恕我直言，因为它允许约束对应用程序状态的变化作出反应，例如隐藏侧边栏或移动分割器，但它确实使得简单的情况更难以开始工作。

define(["dojo/_base/declare",
    "dojo/dnd/move",
    "dojo/dom",
    "dojo/_base/window",
    "dojo/dom-style",
    "dojo/dom-geometry",
    ],
    function (declare, move, dom, win, domStyle, domGeom) {

return declare( "my/dnd/move/BodyConstrainedMoveable", [move.constrainedMoveable], {

    markupFactory: function(params, node){
        return new this(node, params);
    },

    constructor: function(node, params) {
        // Constrain the node to be within the body
        this.constraints = function() {
            var n = win.body(),
                s = domStyle.getComputedStyle(n),
                mb = domGeom.getMarginBox(n, s);

            if ( this.node ) {
                var menubox = domGeom.getMarginBox(this.node);

                mb.w -= menubox.w;
                mb.h -= menubox.h;
            }

            return mb;
        };
    }
})});

使用Dojo boxConstrainedMoveable将可移动div约束到窗口

1 个答案: