我有拖放代码，可以在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>试试这个：
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>