javascript - HTML5 multiple drop targets defined in loop -

javascript - HTML5 multiple drop targets defined in loop -

this seems similar problem found here, i'm afraid i'm not understanding solution provided. multiple drop events in html5

i'm attempting setup multiple drop targets 1 drag source, using ext js library. when define closure notifyenter, appears if utilize variable "i", alert (i've changed alert debugging purposes). coming java background, gut solve defining final variable within loop , assigning either or playerlocationpanel i'd before defining closure, doesn't appear valid solution.

this first foray javascript in 8-10 years, help appreciated.

/**** * setup drop targets ***/ var playerpaneldroptargets = new array(); var droptargetels = new array(); for(var i=0;i<=5; i++){ droptargetels[i] = playerlocationpanels[i].body.dom; playerpaneldroptargets[i] = ext.create('ext.dd.droptarget', droptargetels[i], { ddgroup: 'gridexample', notifyenter: function(ddsource, e, date){ // problem here calls, playerlocationpanels[i] // , going 1 more top of loop. //playerlocationpanels[i].body.stopanimation(); //playerlocationpanels[i].body.highlight(); alert(i); } }); }

you need take same basic approach mentioned in question reference: "notifyenter" function needs created in separate function pass "i", , returns handler function. this:

playerpaneldroptargets[i] = ext.create('ext.dd.droptarget', droptargetels[i], { ddgroup: 'gridexample', notifyenter: makehandler(i) }); // ... function makehandler(i) { homecoming function(ddsource, e, date){ alert(i); // etc. }; }

by calling function create handler function, ensure each handler function has own re-create of value of "i".

javascript html5 drag-and-drop