Javascript Drop event not firing during drag and drop

Question

I'm practicing drag and drop in HTML5 and I noticed that the drop event is not firing.

I try and noticed that the dragstart, the dragenter the dragover all this event are firing (I create a console.log output to check it)

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>

Julian Julian · Accepted Answer · 2019-11-05T07:40:19

preventDefault is a method and, as such, should be called by following its name with parenthesis: e.preventDefault(). Also there is a sort of "typo" because false is not being passed as an attribute to the addEventListener() method and instead is being executed inside the dragover function.

Change

droite.addEventListener("dragenter", function(e){e.preventDefault, false});
droite.addEventListener("dragover", function(e){e.preventDefault, false});

for

droite.addEventListener("dragenter", function(e){e.preventDefault()}, false);
droite.addEventListener("dragover", function(e){e.preventDefault()}, false);

and you should be good to go.

Javascript Drop event not firing during drag and drop

1 Answers