如何实现将div拖拽至表格内的其他列？

• 移除多余的DOMContentLoaded监听
  Angular的ngOnInit钩子触发时，组件对应的DOM已经完成初始化，不需要再监听DOMContentLoaded事件。你当前的代码不仅冗余，而且回调函数为空，自然无法生效。

• 实现拖拽核心逻辑

  1. 给需要拖拽的div添加draggable="true"属性（可直接写在模板里，或通过组件动态设置）。
  2. 在ngOnInit或ngAfterViewInit中绑定拖拽相关事件（若依赖子元素渲染，优先用ngAfterViewInit）：

     ngAfterViewInit(): void {
       // 获取拖拽元素（示例用类选择器，建议用ViewChild更符合Angular规范）
       const draggableDiv = document.querySelector('.draggable-div');
       const tableCells = document.querySelectorAll('td');
     
       if (!draggableDiv) return;
     
       // 拖拽开始：存储拖拽元素标识
       draggableDiv.addEventListener('dragstart', (e) => {
         e.dataTransfer?.setData('text/plain', draggableDiv.id);
       });
     
       // 处理表格单元格的放置逻辑
       tableCells.forEach(cell => {
         // 允许放置：必须阻止默认行为
         cell.addEventListener('dragover', (e) => e.preventDefault());
     
         // 执行放置操作
         cell.addEventListener('drop', (e) => {
           e.preventDefault();
           const divId = e.dataTransfer?.getData('text/plain');
           const targetDiv = document.getElementById(divId);
           if (targetDiv) {
             cell.appendChild(targetDiv);
           }
         });
       });
     }
     

  3. 关键注意点：
     • 拖拽元素必须设置draggable="true"，否则无法触发拖拽事件。
     • dragover事件中必须调用e.preventDefault()，否则drop事件不会被触发。
     • 若使用Angular的ViewChild获取元素，要确保在ngAfterViewInit中操作，避免元素未渲染导致的获取失败。

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