Javascript - 在 Internet Explorer 和 Edge 中拖放不起作用答案

【问题标题】：Javascript - drag and drop in Internet Explorer and Edge don't workJavascript - 在 Internet Explorer 和 Edge 中拖放不起作用
【发布时间】：2016-09-19 09:54:21
【问题描述】：

我的拖放代码在 Chrome 和 Firefox 中正常运行，但在 Internet Explorer 11 和 Edge 中无法运行。

这是在树视图中移动节点的简化示例。您拖动一个节点（li 元素）并将其放在另一个节点（也是 li 元素）上。因此，当您将元素拖放到另一个元素时，它会提醒您在什么上移动了什么。这适用于 Chrome anf FF，但不适用于 IE 和 Edge。有谁知道为什么？似乎 IE 和 Edge 处理拖放的方式与其他浏览器不同，但我不知道要更改什么。

这里是代码（整页）：

<!DOCTYPE html>
<html>

    <head>
        <title>DD Test</title>

        <!-- jQuery -->
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    </head>

    <body>
        <ul>
            <li draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">Coffee</li>
            <li draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">Tea</li>
            <li draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">Milk</li>
        </ul>     
    </body>

</html>


<script>
    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.stopPropagation();
        var object = $(ev.target);
        var objectname = object.html();
        ev.dataTransfer.setData("objectname", objectname);
    }

    function drop(ev) {
        ev.preventDefault();
        ev.stopPropagation();
        var target = $(ev.target);
        var targetname = target.html();
        var objectname = ev.dataTransfer.getData("objectname");
        alert(objectname + " on " + targetname);
    }
</script>

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.stopPropagation();
  var object = $(ev.target);
  var objectname = object.html();
  ev.dataTransfer.setData("objectname", objectname);
}

function drop(ev) {
  ev.preventDefault();
  ev.stopPropagation();
  var target = $(ev.target);
  var targetname = target.html();
  var objectname = ev.dataTransfer.getData("objectname");
  alert(objectname + " on " + targetname);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">Coffee</li>
  <li draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">Tea</li>
  <li draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">Milk</li>
</ul>

【问题讨论】：

你能解释一下你在用这段代码做什么吗？
您想要它以便重新组织列表吗？
这是在树视图中移动节点的简化示例。您拖动一个节点（
元素）并将其放在另一个节点（也是
元素）上。当然，实际项目比这复杂得多，这只是为了展示拖放如何在 Chrome 和 FF 上工作，但在 IE 和 Edge 上不工作。试想一下，不是“警报”，而是有一些有用的功能。

【解决方案1】：

试试这个：

function allowDrop(e) {
        e.preventDefault();
    }

    function drag(e) {
        e.stopPropagation();
        var object = $(e.target);
        var objectname = object.html();
        e.dataTransfer.setData("objectname", objectname);
    }

    function drop(e) {
        e.preventDefault();
        e.stopPropagation();
        var target = $(e.target);
        var targetname = target.html();
        var objectname = e.dataTransfer.getData("objectname");
        alert(objectname + " on " + targetname);
    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js">    </script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js">    </script>
<ul>
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ul>

【讨论】：

我不想重新订购。我只想拖动节点并在放置时获取有关拖动的内容和放置的内容的信息。或者，简单地回答为什么我上面的代码在 Chrome 和 FF 上运行，而不是在 IE 和 Edge 上运行？
我把所有的ev都改成了e的
一切都一样。适用于 Chrome 和 FF，但不适用于 IE 和 Edge :(
那么我不确定它是否可能