时间戳

首页 > 解决方案 > 未捕获的类型错误：无法读取未定义的属性“dataTransfer”

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

问题描述

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

html 在中，<body>而 javascript 在<head>if 中。

这是我的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>

标签： javascripthtmldrag-and-drop

解决方案

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

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

推荐阅读