IE11：拖放無法正常工作

Question

我無法使用IE11來紀念我已在放置區域元素上注冊的dragOver ， dragLeave和drop事件處理程序。

可拖動項上的dragStart處理程序工作正常，放置目標上的mouseover和mouseout處理程序也可以工作-而不是放置目標上的拖放處理程序。

to be happening is that you should see output in the F12 tools Console when you 僅供參考，發生的是，當您執行以下操作時，應該在F12工具控制台中看到輸出

開始拖動，
拖動到放置目標上
拖出放置目標，然后
放下放下目標。

此外，當您將鼠標拖到放置目標上時，應該會看到一個紅色的輪廓，而當拖出放置目標時，該輪廓將消失。

<!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>

有什么建議么？

Answer 1

直到在IE11中為dragenter添加偵聽器后，我才能啟動dragopen。 因此，請嘗試一下。

  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