перетаскивание не работает в 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);  
    }
}

... и это вложения для 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 'Мы изменили события, как предложил @Chase, функции вызываются по событию, и теперь я получаюInvalid argument ошибка дляe.dataTransfer.setData('text/html', this.innerHTML); внутри функции.handleDragStart

Опять этотолько в режимах IE9 и IE8.

Ответы на вопрос(4)

Вам нужно сделать две вещи для перетаскивания, чтобы работать в I.E ..

1) Когда вы установите и получите данные, используйтетекст' и не 'текст / html»

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

e.dataTransfer.getData('text');

2) Предотвращение поведения по умолчанию при обработкеDragEnter» (так же как 'перетащить за').

function handleDragEnter(e) {
    if (e.preventDefault) { 
        e.preventDefault(); 
    } 
    ... 
}
Решение Вопроса

Используйте "текст" вместо "текст / html»

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

Увидетьэта статья для объяснения

Хотя Internet Explorer начинал с введения толькотекст" а также "URL» как действительные типы данных, HTML5 расширяет это, позволяя указывать любой тип MIME. Ценности "текст" а также "URL» будет поддерживаться HTML5 для обратной совместимости, но они отображаются на "текст / обычный» а также "текст / Ури список».

 Dan F22 янв. 2014 г., 06:05
спасатель, спасибо!
 Azevedo20 февр. 2015 г., 17:58
Я просмотрел много страниц и учебных пособий, чтобы найти ответ здесь. Спасибо!
 MSC31 июл. 2015 г., 02:52
Chrome и Firefox терпят "текст" так что теперь я использую это вместо. К сожалению, это означает, что вы можетехранить два разных типа данных (как мы могли бы стекст / обычный» а также "текст / html»). IE кашлянул, когда я передал массив в setData ("URL»), например.

IE немного отличается от большинства, попробуйте,ondragstartondragenter, так далее..

            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);
}
 Tomcatom10 окт. 2012 г., 00:23
Я попробовал window.event в любом случае, это некажется, ничего не меняет
 Tomcatom09 окт. 2012 г., 21:23
еще раз спасибо!
 Tomcatom10 окт. 2012 г., 00:18
это выдает ту же ошибку.
 Tomcatom09 окт. 2012 г., 17:35
Я пытался, он выдает ту же ошибку. Пробовал как с большой буквы, так и без нее. Может у него проблемы с?e.
 Tomcatom09 окт. 2012 г., 20:03
 Tomcatom10 окт. 2012 г., 01:05
Доступен ли вам сейчас чат?
 Tomcatom09 окт. 2012 г., 19:01
Это нене делай этого. Я могу'т для меня жизнь выяснить, в чем проблема
 Tomcatom09 окт. 2012 г., 22:32
Да, я знаю, но я могуЯ не использую jQuery. Iv»нам специально сказали не использовать библиотеки или фреймворки ...
 Chase09 окт. 2012 г., 17:31
менятьtext/html чтобы простоText, Это выглядит как.setData() принимает только формат текста или URL:msdn.microsoft.com/en-us/library/ie/ms536744(v=vs.85).aspx
 Chase10 окт. 2012 г., 00:43
this может работать некорректно в обработчиках событий IE. Попробуйте обновленный код выше.
 Tomcatom09 окт. 2012 г., 17:27
Я попробовал это, он выдает мне неверный аргумент ошибки дляe.dataTransfer.setData('text/html', this.innerHTML); внутри функции.handleDragStart

setData метод ожидатьТип данных String, а не Number

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

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

Ваш ответ на вопрос