拖放期间未触发Javascript Drop事件答案

【问题标题】：Javascript Drop event not firing during drag and drop拖放期间未触发Javascript 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" alt="title"/>
</body>
</html>

【问题讨论】：

标签： javascript drag-and-drop

【解决方案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);

你应该很高兴。

【讨论】：