title: drag and drop not working in IE - Javascript, HTML5
body: <p>I've built this checker-board app which uses HTML5's Drag&amp;Drop with javascript.
  It works great on chrome and firefox, but not on IE9 or IE8.
  My guess is that the problem is with how I attached the events.</p>
  
  <p>This here is where the events are attached for all browsers BUT IE:</p>
  
  <pre><code>function eventer(){
  for (var i = 0, len = allPieces.length; i &lt; len; i++){
          allPieces[i].addEventListener('dragstart', handlePieceDragStart, false);
  }
  for (var i = 0, len = allSquares.length; i &lt; 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);  
      }
  }
  </code></pre>
  
  <p>...and this is the attachments for IE:</p>
  
  <pre><code>function eventerIE(){
      for (var i = 0, len = allPieces.length; i &lt; len; i++){
              allPieces[i].attachEvent('dragstart', handlePieceDragStart, false);
      }
      for (var i = 0, len = allSquares.length; i &lt; 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);
      }
  }
  </code></pre>
  
  <p>These are the functions that are called on event:</p>
  
  <pre><code>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 &lt; 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');
  
  }
  </code></pre>
  
  <p>I hope the code gives a good idea as to what is happening there, if you have any questions about it I would love to comment and explain more.</p>
  
  <p>Thanks ahead</p>
  
  <p><strong>EDIT:</strong> After Iv'e changed the events as @Chase suggested, The functions are being called upon event, and now I get an <code>Invalid argument</code> error for <code>e.dataTransfer.setData('text/html', this.innerHTML);</code> inside the function <code>handleDragStart</code>.</p>
  
  <p>Again, that's only in IE9 and IE8 mode.</p>