CODEWITHSUNDEEP
javascriptdojo
GibboK
GibboK

Reputation: 73918

How to disable/stop drag action when using dojo/dnd/Moveable?

I am using a dojo/dnd/Moveable in order to drag a div on a page, similarly to the example below.

During event 'move' which run when user is dragging the div I need to apply some logic (in my real example I need to check for some mouse coordinate), if logic is not valid I need to STOP dragging the div.

I have tried to use dojo.dnd.manager.stopDrag() with no success.

I would like to know:

A sample of working code would be appreciated. Thanks.

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

  });
});

Upvotes: 3

Views: 852

Answers (1)

GibboK
GibboK

Reputation: 73918

I was able to solve my problem using constrainedMoveable from dojo/dnd/move.

Basically it is possible to setup an "area" where the dragging is only allowed, I used constrainedMoveable as I need to dynamically calculated the "area" .

Actually dojo/dnd/move offers severals specialized Movables:

constrainedMoveable

used to constrain a move to a dynamically calculated box.

Notes: the function constraints (must be overwritten) and has to return an object with the the following properties for l,t,w,h (left/top/width/height).

boxConstrainedMoveable

can be used to constrain a move to a predefined box.

parentConstrainedMoveable

can be used to constrain the move by the boundaries of the node’s parent.

More information can be found here.

Working example 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
                    };
            }

});

Upvotes: 1

Related Questions