Naming an anonymous function breaks my code

Question

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

With your setup, you would have to do `$('#PlayArea').droppable(new myDroppable());` — Felix Kling, Jan 03 '14 at 17:03

score 2 · Answer 1 · answered Jan 03 '14 at 16:57

2

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.

answered Jan 03 '14 at 16:57

kryger

12,906
8
44
65

I'm trying to use the equals sign instead of the colon to assign the 'drop' method. – Phillip Senn Jan 03 '14 at 17:04

score 2 · Answer 2 · answered Jan 03 '14 at 16:57

2

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

answered Jan 03 '14 at 16:57

Satpal

132,252
13
159
168

in this case, shouldn't you make the last line `$('#PlayArea').droppable(myDroppable());` so the function is actually called, instead of passed as the parameter? – forgivenson Jan 03 '14 at 16:59
Is there a way to say myDroppable.tolerance = 'pointer', using the equals sign as the assignment operator instead of the colon? – Phillip Senn Jan 03 '14 at 17:10
@Phillip, You can use `$("#PlayArea" ).on( "drop", function( event, ui ) {} )`. We have limitation as droppable accept object literal. So you can try `$("#PlayArea" ).on( "drop", new myDroppable().drop)` – Satpal Jan 03 '14 at 17:13

score 0 · Accepted Answer · answered Jan 03 '14 at 23:15

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.

Naming an anonymous function breaks my code

3 Answers3

OR