title: IE11: Drag & drop not working
body: <p>I cannot get IE11 to honor the <code>dragOver</code>, <code>dragLeave</code>, and <code>drop</code> event handlers I have registered on the drop zone element. </p>
  
  <p>The <code>dragStart</code> handler on the draggable items works fine, and so do the <code>mouseover</code> and <code>mouseout</code> handlers on the drop target--just not the drag &amp; drop handlers on the drop target.</p>
  
  <p>FYI, what <i>ought</i> to be happening is that you should see output in the F12 tools Console when you </p>
  
  <ul>
  <li>start the drag,</li>
  <li>drag over the drop target,</li>
  <li>drag out of the drop target, and</li>
  <li>drop on the drop target.</li>
  </ul>
  
  <p>Furthermore, you should see a red outline appear when you drag over the drop target and disappear when you drag out of the drop target.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Drag &amp;amp; Drop&lt;/title&gt;
  &lt;style&gt;
    *[draggable=true] { cursor: move; }
    .activated { outline: 1px solid red; }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div&gt;&lt;a href="#" draggable="true"&gt;Lorem ipsum&lt;/a&gt;&lt;/div&gt;
  &lt;div&gt;&lt;a href="#" draggable="true"&gt;dolor sit amet&lt;/a&gt;&lt;/div&gt;
  &lt;div&gt;&lt;a href="#" draggable="true"&gt;consectetur adipiscing elit&lt;/a&gt;&lt;/div&gt;
  &lt;div&gt;&lt;a href="#" draggable="true"&gt;Curabitur non semper leo&lt;/a&gt;&lt;/div&gt;
  &lt;div&gt;&lt;a href="#" draggable="true"&gt;Pellentesque habitant morbi &lt;/a&gt;&lt;/div&gt;
  &lt;div&gt;&lt;a href="#" draggable="true"&gt;tristique senectus&lt;/a&gt;&lt;/div&gt;
  
  &lt;p class="drop-zone"&gt;
    Drop Here
  &lt;/p&gt;
  
  &lt;script&gt;
    window.onload = function () {
      function findAll(selector) {
        const nodeList = document.querySelectorAll(selector);
        const nodes = Array.prototype.slice.call(nodeList);
        return nodes;      
      }
  
      findAll('*[draggable=true]').forEach(function (node) {
        node.addEventListener('dragstart', function (event) {
          const data = node.childNodes[0].nodeValue;
          event.dataTransfer.effectAllowed = 'all';
          event.dataTransfer.setData('Text', data);
  
          console.log('Drag start: "' + data + '"');
          return false;
        });
      });
  
      findAll('.drop-zone').forEach(function (node) {
        node.addEventListener('mouseover', function (event) {
          console.log('Mouse over');
          node.style.background = 'pink';
        });
        node.addEventListener('mouseout', function (event) {
          console.log('Mouse out');
          node.style.background = '';
        });
  
        node.addEventListener('dragover', function (event) {
          if (event.preventDefault) event.preventDefault();
          node.classList.add('activated');
  
          const data = node.childNodes[0].nodeValue;
          console.log('Drag over: "' + data + '"');
          return false;
        });
        node.addEventListener('dragleave', function (event) {
          if (event.preventDefault) event.preventDefault();
          node.classList.remove('activated');
  
          const data = node.childNodes[0].nodeValue;
          console.log('Drag leave: "' + data + '"');
          return false;
        });
        node.addEventListener('drop', function (event) {
          if (event.preventDefault) event.preventDefault();
          node.classList.remove('activated');
          const text = node.childNodes[0].nodeValue;
          const data = event.dataTransfer.getData('Text');
  
          console.log('Dropped on: "' + text + '"');
          console.log('  data: "' + data + '"');
          return false;
        });
      });
    };
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any suggestions?</p>