arrastrar y soltar no funciona en IE - Javascript, HTML5
He construido esta aplicación de tablero de ajedrez que usa Arrastrar y soltar de HTML5 con javascript. Funciona muy bien en Chrome y Firefox, pero no en IE9 o IE8. Mi conjetura es que el problema está en cómo adjunté los eventos.
Aquí es donde se adjuntan los eventos para todos los navegadores PERO 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);
}
}
... y estos son los adjuntos para 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);
}
}
Estas son las funciones que se llaman en el evento:
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');
}
Espero que el código dé una buena idea de lo que está sucediendo allí. Si tiene alguna pregunta al respecto, me encantaría comentar y explicar más.
Gracias por adelantado
EDITAR: Después de que Iv'e cambió los eventos como se sugirió en @Chase, se llama a las funciones al evento, y ahora obtengo unInvalid argument
error parae.dataTransfer.setData('text/html', this.innerHTML);
dentro de la funciónhandleDragStart
.
De nuevo, eso es solo en IE9 y IE8.