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