拖放期间未触发Javascript Drop事件
Posted
技术标签:
【中文标题】拖放期间未触发Javascript Drop事件【英文标题】：Javascript Drop event not firing during drag and drop 【发布时间】：2020-03-01 12:06:10 【问题描述】：我在 html5 中练习拖放，我注意到 drop 事件没有触发。
我尝试注意到 dragstart、dragenter 和 dragover 所有这些事件都在触发（我创建了一个 console.log 输出来检查它）
function alerteMoi()
continent = document.getElementById("afrique");
droite = document.getElementById("droite");
continent.addEventListener("dragstart", startDrag, false);
droite.addEventListener("dragenter", function(e)e.preventDefault, false);
droite.addEventListener("dragover", function(e)e.preventDefault, false);
droite.addEventListener("drop", dropped, false);
function startDrag(e)
console.log(continent);
e.dataTransfer.setData("Text", continent);
function dropped(e)
//Cannot log this event, it means that the dropped event is not firing
console.log(droite);
e.preventDefault();
droite.innerHTML = e.dataTransfer.getData("continent");
window.addEventListener('load', alerteMoi, false);#gauche
float: left;
height: auto;
width: 48%;
border: 1px solid red;
#droite
float: right;
height: 100px;
width: 44%;
border: 1px solid blue;
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css"/>
<script src="script.js"></script>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<ul id="gauche">
<li draggable="true" id="afrique">Afrique</li>
<li>Amerique</li>
<li onclick="alert('Azie !');">Azie</li>
<li>Europe</li>
<li onclick="alert('Oceanie !');">Oceanie</li>
</ul>
<div id="droite">
<ul><li>Monde</li></ul>
</div>
<img src="ex.png" />
</body>
</html>【问题讨论】：
【参考方案1】：preventDefault 是一个方法，因此，应该通过在其名称后面加上括号来调用：e.preventDefault()。还有一种“错字”，因为false 没有作为属性传递给addEventListener() 方法，而是在dragover 函数中执行。
改变
droite.addEventListener("dragenter", function(e)e.preventDefault, false);
droite.addEventListener("dragover", function(e)e.preventDefault, false);
为
droite.addEventListener("dragenter", function(e)e.preventDefault(), false);
droite.addEventListener("dragover", function(e)e.preventDefault(), false);
你应该很高兴。
【讨论】：
以上是关于拖放期间未触发Javascript Drop事件的主要内容，如果未能解决你的问题，请参考以下文章