拖放不适用于IE-Javascript、HTML5

我构建了这个棋盘应用程序，它使用HTML5的拖放和javascript。 它在chrome和firefox上运行得很好，但在IE9或IE8上却不行。 我的猜测是，问题在于我如何附加这些事件

此处是除IE以外的所有浏览器的事件附加位置：

function eventer(){
for (var i = 0, len = allPieces.length; i < len; i++){
        allPieces[i].addEventListener('dragstart', handlePieceDragStart, false);
}
for (var i = 0, len = allSquares.length; i < len; i++){
            allSquares[i].addEventListener('dragstart', handleDragStart, false);
            allSquares[i].addEventListener('dragenter', handleDragEnter, false);
            allSquares[i].addEventListener('dragover', allowDrop, false);
            allSquares[i].addEventListener('dragleave', handleDragLeave, false);
            allSquares[i].addEventListener('drop', handleDrop, false);  
    }
}

函数事件器（）{
对于（变量i=0，len=allPieces.length；i

…这是IE的附件：

function eventerIE(){
    for (var i = 0, len = allPieces.length; i < len; i++){
            allPieces[i].attachEvent('dragstart', handlePieceDragStart, false);
    }
    for (var i = 0, len = allSquares.length; i < len; i++){
                allSquares[i].attachEvent('dragstart', handleDragStart);
                allSquares[i].attachEvent('dragenter', handleDragEnter);
                allSquares[i].attachEvent('dragover', allowDrop);
                allSquares[i].attachEvent('dragleave', handleDragLeave);
                allSquares[i].attachEvent('drop', handleDrop);
    }
}

函数事件（）{
对于（变量i=0，len=allPieces.length；i

以下是在事件发生时调用的函数：

function handleDragStart(e){
    dragSrcEl = this;
    e.dataTransfer.effectAllowed = 'copy';
    e.dataTransfer.setData('text/html', this.innerHTML);

}
function handlePieceDragStart(e){
    dragPiece = this;
    e.dataTransfer.setData('id', dragPiece.id);
    dragPieceId = dragPiece.id;
}
function handleDragEnter(e){
    this.classList.add('over');

}
function allowDrop(e){
    e.preventDefault();
}; 
function handleDragLeave(e){
    this.classList.remove('over');
}
function handleDrop(e) {

  if (e.stopPropagation) {
    e.stopPropagation();
    e.preventDefault();
  }

  if (dragSrcEl != this) {
    dragSrcEl.innerHTML = this.innerHTML;
    this.innerHTML = e.dataTransfer.getData('text/html');
    pId = e.dataTransfer.getData('id');
    this.taken = dragPiece.id;
    sId = this.id;

  }
var sqrs = document.getElementsByTagName("td");
    [].forEach.call(sqrs, function (col){
        col.classList.remove('over');

    });
    for(var i=0, len = piecesPosition.length; i < len; i++){
            if (piecesPosition[i][0]==dragPiece.id){
            delete piecesPosition[i];       
            piecesPosition.push([dragPiece.id,sId]);
            piecesPosition = piecesPosition.filter(function(){return true});

        }

    }
    dragPiece = document.getElementById(dragPieceId);
    dragPiece.pstn = sId;
    this.classList.remove('over');

}

功能手柄启动（e）{
dragSrcEl=此；
e、 dataTransfer.effectAllowed='copy'；
e、 dataTransfer.setData（'text/html'，this.innerHTML）；
}
功能手柄启动（e）{
dragPiece=这个；
e、 dataTransfer.setData（'id'，dragPiece.id）；
dragPieceId=dragPiece.id；
}
功能手柄输入（e）{
this.classList.add（'over'）；
}
函数allowDrop（e）{
e、 预防默认值（）；
}; 
功能手柄（e）{
this.classList.remove（'over'）；
}
函数handleDrop（e）{
如果（如停止播放）{
e、 停止传播（）；
e、 预防默认值（）；
}
if（dragSrcEl！=此）{
dragSrcEl.innerHTML=this.innerHTML；
this.innerHTML=e.dataTransfer.getData（'text/html'）；
pId=e.dataTransfer.getData（'id'）；
this.take=dragPiece.id；
sId=这个.id；
}
var sqrs=document.getElementsByTagName（“td”）；
[]forEach.call（sqrs，函数（col）{
col.classList.remove（'over'）；
});
对于（变量i=0，len=piecesPosition.length；i

我希望代码能给你一个很好的想法，告诉你那里发生了什么，如果你对此有任何疑问，我愿意多加评论和解释

谢谢

EDIT:在Iv'e按照@Chase的建议更改事件后，函数被调用到事件上，现在我得到

e.dataTransfer.setData（'text/html'，this.innerHTML）的
无效参数
错误在函数内
handleDragStart

同样，这只适用于IE9和IE8模式。
IE与大多数模式稍有不同，请尝试，等等

编辑：

function handleDragStart(e){
    if(!e)
       e = window.event;

    dragSrcEl = (window.event) ? window.event.srcElement /* for IE */ : event.target;
    e.dataTransfer.effectAllowed = 'copy';
    e.dataTransfer.setData('text/html', dragSrcEl.innerHTML);
}

使用“文本”而不是“文本/html”

看

尽管InternetExplorer一开始只引入了“文本”和“URL”作为有效的数据类型，但HTML5对此进行了扩展，允许指定任何MIME类型。HTML5支持值“text”和“URL”的向后兼容性，但它们被映射到“text/plain”和“text/uri list”

要使拖放在中工作，您需要做两件事，即

1）设置和获取数据时，使用“文本”而不是“文本/html”

e.dataTransfer.setData('text', this.innerHTML);

e.dataTransfer.getData('text');

2）防止处理“dragenter”（以及“dragover”）时出现默认行为。

function handleDragEnter(e) {
    if (e.preventDefault) { 
        e.preventDefault(); 
    } 
    ... 
}

setData
methodexpect字符串数据类型而不是数字

setData('text',1)//is wrong

setData('text',''+1)//is correct

我试过了，它为
e.dataTransfer.setData（'text/html'，this.innerHTML）抛出了一个无效的参数错误函数内的
handleDragStart
。将
text/html
更改为仅
text
。它看起来像
.setData（）
只接受文本或URL的格式：我试过了，它抛出了相同的错误。尝试使用大写字母t和不使用大写字母t。也许他在
e.
？方面有问题，但并没有这样做。我一辈子都搞不懂我们到底出了什么问题。我翻阅了很多网页和教程，只是为了在这里找到答案。谢谢Chrome和Firefox允许“文本”，所以我现在用它来代替。不幸的是，这意味着您不能存储两种不同类型的数据（我们可以使用“text/plain”和“text/html”）。例如，当我将数组传递给setData（“URL”）时，IE咳嗽了。我在Edge中遇到了这个问题，您的解决方案解决了我的问题，谢谢。
function handleDragEnter(e) {
    if (e.preventDefault) { 
        e.preventDefault(); 
    } 
    ... 
}

setData('text',1)//is wrong

setData('text',''+1)//is correct