IE11: Drag & drop not working

Question

I cannot get IE11 to honor the dragOver , dragLeave , and drop event handlers I have registered on the drop zone element.

The dragStart handler on the draggable items works fine, and so do the mouseover and mouseout handlers on the drop target--just not the drag & drop handlers on the drop target.

FYI, what ought to be happening is that you should see output in the F12 tools Console when you

start the drag,
drag over the drop target,
drag out of the drop target, and
drop on the drop target.

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.

<!DOCTYPE html>
<html>
<head>
<title>Drag &amp; Drop</title>
<style>
  *[draggable=true] { cursor: move; }
  .activated { outline: 1px solid red; }
</style>
</head>
<body>
<div><a href="#" draggable="true">Lorem ipsum</a></div>
<div><a href="#" draggable="true">dolor sit amet</a></div>
<div><a href="#" draggable="true">consectetur adipiscing elit</a></div>
<div><a href="#" draggable="true">Curabitur non semper leo</a></div>
<div><a href="#" draggable="true">Pellentesque habitant morbi </a></div>
<div><a href="#" draggable="true">tristique senectus</a></div>

<p class="drop-zone">
  Drop Here
</p>

<script>
  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;
      });
    });
  };
</script>
</body>
</html>

Any suggestions?

Answer 1

I was not able to get dragopen to fire until I added a listener for dragenter in IE11. So, give that a try.

  node.addEventListener('dragenter', function (event) {
    if (event.preventDefault) event.preventDefault();

    const data = node.childNodes[0].nodeValue;
    console.log('Drag enter: "' + data + '"');
    return false;
  });

IE11: Drag & drop not working

Question

1 answers

solution1
3 ACCPTED 2016-09-27 15:40:36

IE11: Drag & drop not working

Question

1 answers

solution1 3 ACCPTED 2016-09-27 15:40:36

solution1
3 ACCPTED 2016-09-27 15:40:36