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

Question

我有一个div，我应用了Dojo dojo/dnd/Moveable。但是，我想防止用户将div 拖出屏幕。所以，我认为我需要实现dojo/dnd/move/boxConsstrictedMoveable。

我从这个开始：

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

这里有一个类似的SO问题：在 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

有没有人在道场做过这件事？我非常感谢一个例子。

Answer 1

我查找了一些旧代码，我确实实现了这种类型的可移动代码。这是针对 Dojo 1.7 编写的，所以事情可能在 1.9 中发生了变化。小提琴演示：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;
        };
    }
})});