我正在练习HTML5中的拖放操作，但我注意到drop事件没有触发。
我尝试并注意到dragstart，dragenter，draftover引发了所有此事件（我创建了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",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" alt="title"/>
</body>
</html>