HTML5循环中定义的多个拖放目标

Question

这似乎与这里发现的问题类似，但我恐怕不理解提供的解决方案。Multiple drop events in HTML5

我尝试使用Ext库从一个拖放源设置多个拖放目标。当我为notifyEnter定义闭包时，它似乎总是使用变量"i“来警示(出于调试目的，我已经将其更改为警示)。我来自Java语言的背景，我的直觉是通过在循环中定义最后一个变量并在定义闭包之前将i或我想要的playerLocationPanel赋值给它来解决这个问题，但这似乎不是一个有效的解决方案。

这是我8-10年来第一次尝试使用Javascript，因此非常感谢您的帮助。

/****
* 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){
            // 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);

        }
    });
}

Answer 1

您需要采用与您引用的问题中提到的相同的基本方法:您的"notifyEnter“函数需要在一个单独的函数中创建，您将向该函数传递"i"，该函数将返回处理函数。如下所示：

playerPanelDropTargets[i] = Ext.create('Ext.dd.DropTarget', dropTargetEls[i], {
    ddGroup: 'GridExample',
    notifyEnter: makeHandler(i)
});

// ...

function makeHandler(i) {
  return function(ddSource, e, date){
        alert(i);
        // etc.
    };
}

通过调用另一个函数来创建处理程序函数，可以确保每个处理程序函数都有自己的"i“值副本。