时间戳

首页 > 解决方案 > 拖放期间未触发Javascript Drop事件

javascript - 拖放期间未触发Javascript Drop事件

问题描述

我在 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>

标签： javascriptdrag-and-drop

解决方案

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.

推荐阅读