Question

未捕获的类型错误：无法读取未定义的属性“dataTransfer”

2021-08-30

720

javascript html events drag-and-drop

我试图添加插槽，单击按钮时可以将对象拖入其中。但遇到错误

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