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