将 ondrop 分配给 JavaScript 中的元素

Question

我仍在努力编写一段 JavaScript 代码。我已将其简化为以下编码：

<!DOCTYPE html>
<html lang="de">
<meta charset="UTF-8">
<title>dad-test</title>
<body>
<div  id='spaltemu'> </div>
<script type="text/javascript">
function allowdrop(event) {
  event.preventDefault();
}
function drag(event) {
  event.dataTransfer.setData("text", event.target.id);
}
function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("text");
  event.target.appendChild(document.getElementById(data));
}
    var spkart = document.getElementById ('spaltemu');
    spkart.ondrop = 'drop(event)';
    spkart.ondragover = 'allowdrop(event)';
    alert ('Halt');
</script>
</body>
</html>

当运行这段代码时，调试器显示 ondrop 的分配和 ondragover 的分配都不起作用。调试器将“null”显示为值。我不明白怎么了。非常感谢任何提示！

Answer 1

虽然我不完全理解这个问题，但我终于找到了解决办法。为什么这会导致错误： ...

function allowdrop(event) {
  event.preventDefault();
}
var spkart = document.getElementById ('spaltemu');
spkart.ondragover = 'allowdrop(event)';

当这个有效时：

spkart.ondragover = function(event) {
event.preventDefault();
};

尽管如此，我还是找到了解决办法...

将 ondrop 分配给 JavaScript 中的元素

assign ondrop to an element in JavaScript

javascript

drag-and-drop