Javascript - 在 Internet Explorer 和 Edge 中拖放不起作用
Posted
技术标签:
【中文标题】Javascript - 在 Internet Explorer 和 Edge 中拖放不起作用【英文标题】：Javascript - drag and drop in Internet Explorer and Edge don't work 【发布时间】：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 上不工作。试想一下，不是“警报”，而是有一些有用的功能。 或许你需要从window.event获取事件：***.com/questions/1000597/… 不。我按照该主题的建议更改了代码，但仍然无法正常工作。 【参考方案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 :( 那么我不确定它是否可能以上是关于Javascript - 在 Internet Explorer 和 Edge 中拖放不起作用的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript 在Firefox和Internet Explorer中关闭窗口
Internet Explorer 的 Javascript 优化
如何在 Internet Explorer 7 中获得缩放级别？ (javascript)
如何在 Internet Explorer 浏览器的 JavaScript 中修复数组 indexOf()