CODEWITHSUNDEEP
javascriptjquery-ui
Phillip Senn
Phillip Senn

Reputation: 47663

Naming an anonymous function breaks my code

I asked a similar question over a year ago. But I can't figure this out.

This works:

$('#PlayArea').droppable({
    drop: function( myEvent, myUI ) {
        debugger;
    }
});

But this doesn't:

function myDroppable() {
    this.drop = function( myEvent, myUI ) {
        debugger;
    }
};
$('#PlayArea').droppable(myDroppable);

Upvotes: 1

Views: 53

Answers (3)

Phillip Senn
Phillip Senn

Reputation: 47663

myDroppable = {};
myDroppable.drop = function( myEvent, myUI ) {
   debugger;
}
myDroppable.tolerance = 'pointer';
myDroppable.hoverClass = 'ui-state-highlight';
$('#PlayArea').droppable(myDroppable);

This way you don't use colons as assignment operators.

Upvotes: 0

Satpal
Satpal

Reputation: 133453

You need to use, As droppable takes an object literal, thus return it.

function myDroppable() {
    return {
        drop: function (myEvent, myUI) {
            debugger;
        }
    }
};
$('#PlayArea').droppable(myDroppable());

OR

var myDroppable = {
    drop: function (myEvent, myUI) {
        debugger;
    }
};
$('#PlayArea').droppable(myDroppable);

Upvotes: 2

kryger
kryger

Reputation: 13181

droppable takes an object literal, not a function. These two snippets are not equivalent, what you're actually doing is something like this (it's easier to see it's wrong this way):

$('#PlayArea').droppable(function myDroppable() {
    this.drop = function( myEvent, myUI ) {
        debugger;
    }
});

If you want to use a named function, make it return the configuration object that's accepted by droppable.

Upvotes: 2

Related Questions