使用 Dojo boxConstrainedMoveable 将 movable div 约束为 window

Question

我有一个 div，我对其应用了 Dojo dojo/dnd/Moveable。但是，我想阻止用户将 div 拖到屏幕外。所以，我想我需要实施dojo/dnd/move/boxConstrainedMoveable。

我从这个开始：

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

这里有一个类似的 SO 问题： 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 留在 window 内。我已经尝试使用 window 框（div 的边距框）实现一些功能。什么都没用，弄得一团糟。

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

有人用 Dojo 做过吗？我会非常感激一个例子。

Answer 1

我查阅了一些旧代码，我确实实现了一次这种类型的可移动。这是针对 Dojo 1.7 编写的，因此在 1.9 中可能有所改变。 Fiddle 示范：https://jsfiddle.net/4ev1daqr/26/

您尝试的解决方案与此解决方案之间的主要区别在于 moveable 中的 constraints 属性需要是函数而不是比静态边界框。使用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 将 movable div 约束为 window

Use Dojo boxConstrainedMoveable to constrain movable div to window

dojo