Question

我已经构建了这个使用HTML5的Drag＆amp; Drop with 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);  
    }
}

...这是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);
    }
}

这些是在事件上调用的函数：

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

}

我希望代码可以很好地了解那里发生的事情，如果您对此有任何疑问，我很乐意发表评论和解释。

提前致谢

编辑：在Iv'e将事件更改为@Chase建议后，函数将在事件中被调用，现在我的Invalid argument内部出现e.dataTransfer.setData('text/html', this.innerHTML);错误函数handleDragStart。

同样，这只是在IE9和IE8模式下。

Answer 1

使用“text”代替“text / html”

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

请参阅this article for explanation

尽管Internet Explorer最初只引入了“text”和“URL”作为有效数据类型，但HTML5将其扩展为允许指定任何MIME类型。 HTML5将支持值“text”和“URL”以实现向后兼容，但它们将映射到“text / plain”和“text / uri-list”。

Answer 2

你需要做两件事来让拖放工作在I.E ..

1）当您设置并获取数据时，请使用＆＃39; text＆＃39;而不是＆text; html＆＃39;

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

e.dataTransfer.getData('text');

2）处理＆＃39; dragenter＆＃39;时防止默认行为。（以及＆＃39; dragover＆＃39;）。

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

Answer 3

IE与大多数情况略有不同，请尝试ondragstart，ondragenter等。

            allSquares[i].attachEvent('ondragstart', handleDragStart);
            allSquares[i].attachEvent('ondragenter', handleDragEnter);
            allSquares[i].attachEvent('ondragover', allowDrop);
            allSquares[i].attachEvent('ondragleave', handleDragLeave);
            allSquares[i].attachEvent('ondrop', handleDrop);

修改：

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

Answer 4

setData方法期望字符串数据类型不是数字

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

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

拖放不能在IE中工作 - Javascript，HTML5

4 个答案: