点击按钮新增拖拽插槽时报Cannot read property 'dataTransfer' of undefined错误

Uncaught TypeError: Cannot read property 'dataTransfer' of undefined...

• 事件绑定逻辑错误：在addRow函数中，你使用了div.ondrop = drop(event)、div.ondragover= allowDrop(event)的写法，这会在创建元素时立即执行drop/allowDrop函数，而非将这两个函数绑定为事件触发时的回调。此时传入的event要么是未定义的全局变量，要么是和拖拽无关的其他事件对象，访问dataTransfer自然会报错。
• 事件属性调用错误：originalEvent是jQuery框架封装事件对象后新增的属性，你使用的是原生JS实现拖拽，原生事件对象本身就直接挂载dataTransfer属性，额外加.originalEvent会导致属性读取失败。

1. 修正addRow中的事件绑定逻辑，直接将函数赋值给事件回调属性，拖拽事件触发时浏览器会自动传入真实的事件对象：

   // 错误写法，会立即执行函数
   // div.ondrop = drop(event);
   // div.ondragover= allowDrop(event);
   // 正确写法，绑定函数引用
   div.ondrop = drop;
   div.ondragover= allowDrop;
   

2. 去掉drag、drop函数中事件对象的.originalEvent前缀，直接访问原生属性：

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

Javascript 代码 #

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

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

function drop(ev) {
  ev.preventDefault();
  var data = ev.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;
  div.ondragover= allowDrop;
  document.getElementById('content').appendChild(div);
}
</script>

HTML 代码 #

（原有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></li>
        </ul>
      </div>
      
      <div id="div2" class="dragcontainer" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</div>

内容的提问来源于stack exchange，提问作者lendo