CODEWITHSUNDEEP
javascriptdojodom-events
voger
voger

Reputation: 676

dojo Moveable events?

I am reading the documentation here http://bill.dojotoolkit.org/api/1.9/dojo/dnd/move.parentConstrainedMoveable and here http://dojotoolkit.org/reference-guide/1.9/dojo/dnd/Moveable.html and some examples found around the web but I don't seem to understand how to make it work. I have this fiddle http://jsfiddle.net/W7V2a/4/ I want before the move starts to call a function, during the move to call another function and once it ends a third function. Not only once but every time a move happens. I can't make it catch the events.

Also buttons will be added and removed all the time so attaching the moveable object to a variable like 

var moveable = new move.parentConstrainedMoveable(button.domNode, {
        handle: this.focusNode,
        area: "content",
        within: true
    });

    on(moveable, "onMoveStart", function (e) {
        dojo.query(".container").style("backgroundColor", "red");
        alert("onMoveStart");
    });

doesn't seem practical. So how can I create moveable objects on the fly and catch their events and do something with these events?

Upvotes: 1

Views: 1117

Answers (1)

Dimitri Mestdagh
Dimitri Mestdagh

Reputation: 44665

When you're working with the dojo/on module, you only need to pass the name of the event. In your case, you have to replace "onMove" by "Move" and "onMoveStart" by "MoveStart", like this:

on(moveable, "MoveStart", function (e) {
    dojo.query(".container").style("backgroundColor", "red");
    alert("onMoveStart");
});

on(moveable, "Move", function (e) {
    dojo.query(".container").style("backgroundColor", "red");
    alert("onMove");
});

I also updated your JSFiddle: http://jsfiddle.net/W7V2a/8/ (though I don't recommend using alert()).

You only have to work with the full name if you're directly working with the function itself. So for example, if you're using the dojo/aspect module, you will have to use:

aspect.after(moveable, "onMove", function(e) {
    dojo.query(".container").style("backgroundColor", "red");
    alert("onMove");
});

However, dojo/on is normally only used for DOM event handling and not for custom events. The best way to use these events is by using the on() function on the moveable itself, for example:

moveable.on("Move", function (e) {
   dojo.query(".container").style("backgroundColor", "red");
   alert("onMove");
});

Upvotes: 1

Related Questions