IE11：拖放无法正常工作

Question

I cannot get IE11 to honor the dragOver , dragLeave , and drop event handlers I have registered on the drop zone element. 我无法使用IE11来纪念我已在放置区域元素上注册的dragOver ， dragLeave和drop事件处理程序。

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. 可拖动项上的dragStart处理程序工作正常，放置目标上的mouseover和mouseout处理程序也可以工作-而不是放置目标上的拖放处理程序。

FYI, what ought to be happening is that you should see output in the F12 tools Console when you 仅供参考，应该发生的是，当您执行以下操作时，应该在F12工具控制台中看到输出

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. 直到在IE11中为dragenter添加侦听器后，我才能启动dragopen。 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：拖放无法正常工作

问题描述

1 个解决方案

解决方案1
3 已采纳 2016-09-27 15:40:36

IE11：拖放无法正常工作

问题描述

1 个解决方案

解决方案1 3 已采纳 2016-09-27 15:40:36

解决方案1
3 已采纳 2016-09-27 15:40:36