Ich habe diese Schachbrett-App erstellt, die Drag & Drop von HTML5 mit Javascript verwendet. Es funktioniert hervorragend auf Chrome und Firefox, aber nicht auf IE9 oder IE8. Ich vermute, dass das Problem darin besteht, wie ich die Ereignisse angehängt habe.

Hier werden die Ereignisse für alle Browser angehängt, ABER 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);  
    }
}

... und das sind die Anhänge für 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);
    }
}

Dies sind die Funktionen, die beim Ereignis aufgerufen werden:

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

}

Ich hoffe, der Code gibt eine gute Vorstellung davon, was dort passiert. Wenn Sie Fragen dazu haben, würde ich gerne mehr kommentieren und erklären.

Vielen Dank voraus

BEARBEITEN: Nachdem ich die Ereignisse wie von @Chase vorgeschlagen geändert habe, werden die Funktionen beim Ereignis aufgerufen, und jetzt erhalte ich einen Invalid argument Fehler für e.dataTransfer.setData('text/html', this.innerHTML); innerhalb der Funktion { {X2}}.

Auch dies ist nur im IE9- und IE8-Modus möglich.

5
Tomcatom 9 Okt. 2012 im 19:16

4 Antworten

Beste Antwort

IE ist ein bisschen anders als die meisten anderen, versuchen Sie es mit ondragstart, ondragenter usw.

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

BEARBEITEN :

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);
}
1
Chase 29 Okt. 2013 im 12:42

Sie müssen zwei Dinge tun, damit Drag & Drop in I.E. funktioniert.

1) Wenn Sie die Daten festlegen und abrufen, verwenden Sie 'text' und nicht 'text / html'

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

e.dataTransfer.getData('text');

2) Verhindern Sie das Standardverhalten beim Umgang mit 'Dragenter' (sowie 'Dragover').

function handleDragEnter(e) {
    if (e.preventDefault) { 
        e.preventDefault(); 
    } 
    ... 
}
2
David 13 Apr. 2016 im 07:59

setData Methode erwartet String-Datentyp nicht Number

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

setData('text',''+1)//is correct
2
Jonathan Mee 19 Sept. 2016 im 15:13