5

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

...そしてこれは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');

}

コードがそこで何が起こっているかについて良いアイデアを与えることを願っています。それについて質問があれば、コメントしてもっと説明したいと思います。

よろしくお願いします

編集： @Chaseが提案したようにIv'eがイベントを変更した後、関数はイベント時に呼び出され、関数内でInvalid argumentエラーが発生します。e.dataTransfer.setData('text/html', this.innerHTML);handleDragStart

繰り返しますが、これはIE9およびIE8モードでのみ行われます。

4

4 に答える 4

23

「text/html」の代わりに「text」を使用してください

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

説明についてはこの記事を参照してください

Internet Explorerは、有効なデータ型として「テキスト」と「URL」のみを導入することから始めましたが、HTML5はこれを拡張して、任意のMIMEタイプを指定できるようにします。値「text」および「URL」は、下位互換性のためにHTML5でサポートされますが、「text/plain」および「text/uri-list」にマップされます。

于 2013-08-05T06:36:09.913 に答える
3

IEでドラッグアンドドロップを機能させるには、2つのことを行う必要があります。

1）データを設定して取得するときは、「text/html」ではなく「text」を使用してください

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

e.dataTransfer.getData('text');

2）「dragenter」（および「dragover」）を処理するときのデフォルトの動作を防止します。

function handleDragEnter(e) {
    if (e.preventDefault) { 
        e.preventDefault(); 
    } 
    ... 
}
于 2016-04-13T07:59:41.400 に答える
2

setDataメソッドは、数値ではなく文字列データ型を期待します

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

setData('text',''+1)//is correct
于 2016-09-19T14:45:51.680 に答える
1

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);
}
于 2012-10-09T15:22:54.700 に答える