title: HTML5 multiple drop targets defined in loop
body: <p>This seems like a similar problem as is found here, but I'm afraid I'm not understanding the solution provided.  <a href="https://stackoverflow.com/questions/6717853/multiple-drop-events-in-html5">Multiple drop events in HTML5</a></p>
  
  <p>I'm attempting to setup multiple drop targets from one drag source, using the Ext JS library.  When I define the closure for notifyEnter, it appears as if it will always use the variable "i", to alert (I've changed it to alert for debugging purposes).  Coming from a Java background, my gut is to solve this by defining a final variable within the loop and assigning either i or the playerLocationPanel that I'd like to it before defining the closure, but that doesn't appear to be a valid solution.</p>
  
  <p>This is my first foray into Javascript in 8-10 years, so your help is greatly appreciated.</p>
  
  <pre><code>/****
  * Setup Drop Targets
  ***/
  var playerPanelDropTargets = new Array();
  var dropTargetEls = new Array();
  for(var i=0;i&lt;=5; i++){
      dropTargetEls[i] = playerLocationPanels[i].body.dom;
  
      playerPanelDropTargets[i] = Ext.create('Ext.dd.DropTarget', dropTargetEls[i], {
          ddGroup: 'GridExample',
          notifyEnter: function(ddSource, e, date){
              // The problem here is that it always calls, specifically playerLocationPanels[i]
              // and i is always going to be 1 more than the top of the loop.
              //playerLocationPanels[i].body.stopAnimation();
              //playerLocationPanels[i].body.highlight();
              alert(i);
  
          }
      });
  }
  </code></pre>