Javascript 拖放事件在拖放期间未触发

Question

我正在 HTML5 中练习拖放，我注意到 drop 事件没有触发。

我尝试注意到dragstart、dragenter、dragover 所有这些事件都在触发（我创建了一个console.log output 来检查它）

 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>

Answer 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);

你应该对go很好。

Javascript 拖放事件在拖放期间未触发

问题描述

1 个解决方案

解决方案1
0 2019-11-05 07:40:19

Javascript 拖放事件在拖放期间未触发

问题描述

1 个解决方案

解决方案1 0 2019-11-05 07:40:19

解决方案1
0 2019-11-05 07:40:19