Uncaught TypeError: Cannot read property 'dataTransfer' of undefined

Question

我正在尝试添加可以在单击按钮时将对象拖入的插槽。但是运行进入错误 Uncaught TypeError: Cannot read property 'dataTransfer' of undefined...

html 在 <body> 中，javascript 在 <head> 中，如果重要的话。

这是我的javascript:

<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.originalEvent.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.originalEvent.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

function addRow() {
  const div = document.createElement('div');

  div.className = 'dragcontainer';
  div.draggable = true;
  div.ondrop = drop(event);
  div.innerHTML = ``;
  div.ondragover= allowDrop(event);

  document.getElementById('content').appendChild(div);
}
</script>

这里是 html:

<input type="button" value="add slot" onclick="addRow()">
<div id="content">
    <div id="div1" class="dragcontainer" ondrop="drop(event)" ondragover="allowDrop(event)">
        <ul draggable="true" ondragstart="drag(event)" id="drag1"> 
          <li><h1>Sample title</h1></li> 
          <li><p>sample text</p></ul></li> 
      </div>
      
      <div id="div2" class="dragcontainer" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
      

</div>

Answer 1

您正在调用函数而不是将它们设置为值。看看我加的评论

function addRow() {
  const div = document.createElement('div');

  div.className = 'dragcontainer';
  div.draggable = true;
  // You are calling drop(event)
  // Change to div.ondrop = drop;
  div.ondrop = drop(event);  
  div.innerHTML = ``;
  // You are calling allowDrop(event)
  // Change to div.ondragover = allowDrop;
  div.ondragover= allowDrop(event); 

  document.getElementById('content').appendChild(div);
}

Uncaught TypeError: Cannot read property 'dataTransfer' of undefined

Uncaught TypeError: Cannot read property 'dataTransfer' of undefined

javascript

html

drag-and-drop