javascript - 使用 dojo/dnd/Moveable 时如何禁用/停止拖动操作？

Question

我正在使用 dojo/dnd/Moveable 来在页面上拖动 div，类似于下面的示例。

在用户拖动 div 时运行的事件 'move' 期间，我需要应用一些逻辑(在我的真实示例中，我需要检查一些鼠标坐标) ，如果逻辑无效，我需要停止拖动 div。

我试过使用dojo.dnd.manager.stopDrag()没有成功。

我想知道:

• 如何停止/禁用拖动操作？

工作代码示例将不胜感激。谢谢。

https://jsfiddle.net/mbrhb7nn/

    require(["dojo/dnd/Moveable", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(Moveable, dom, on){
  on(dom.byId("doIt"), "click", function(){
    var dnd = new Moveable(dom.byId("dndOne"));
              dnd.on('Move', function (event) {
                // add some logic here and stop drag
            }.bind(this));

  });
});

Answer 1

我能够使用 dojo/dnd/move 中的 constrainedMoveable 解决我的问题。

基本上可以设置一个仅允许拖动的“区域”，我使用了constrainedMoveable，因为我需要动态计算“区域”。

实际上 dojo/dnd/move 提供了几个专门的 Movables:

constrainedMoveable

用于限制对动态计算框的移动。

注意:函数约束(必须被覆盖)并且必须返回具有以下属性的对象 l,t,w,h (left/top/width/height)。

boxConstrainedMoveable

可用于限制移动到预定义框。

parentConstrainedMoveable

可用于限制节点父节点边界的移动。

更多信息可以found here .

这里的工作示例: https://jsfiddle.net/mbrhb7nn/5/

require(["dojo/dnd/move", "dojo/dom", "dojo/on", "dojo/domReady!"],

function (move, dom, on) {
            var dnd = new move.constrainedMoveable(dom.byId("dndOne"));
            dnd.constraints = function (event) {
                // defines the area where dragging is allowed
                return {
                        l: 0,
                        t: 0,
                        w: 300,
                        h: 300
                    };
            }

});