Javascript 在HTML5表上的拖放操作中标识单元格

我正在一个角度应用程序中使用HTML5拖放功能。我有以下情况：

• 包含一些可以拖动的“对象”的容器
• 用户可以在其中放置拖动的元素的表

我遵循了本教程中的步骤：

我创建了以下应用程序：

我已将“makeDraggable”指令应用于HTML表，以便它接受drop事件。我想知道是否有办法确定删除元素的表单元格。我知道我可以将“makeDraggable”指令添加到每个TD单元而不是父表，但我想避免它，因为该表可以有数千个单元。这是否可能（并且在性能方面值得）

---

非常感谢，

编辑：替代解决方案

我只是想，在遍历路径数组时，我可以查找“TD”元素（使用标记名

属性），而不是查找
pos\u id
数据属性。类似地，我可以得到父级“TR”。单元格有一个
cellIndex
属性，行有一个
rowIndex
，因此我可以使用这些值在构建表的源对象中查找单元格数据

原始解决方案

我不知道这是否是最好的解决方案，但它对我有效：

首先，在HTML模板中，我向可拖放单元格添加了一个带有该单元格id的
pos\u id
data属性。所以他们看起来像：

<tr>
  <td data-pos_id="101"> ... </td>
  <td data-pos_id="102"> ... </td>
  ...
<tr>
<tr>
  <td data-pos_id="201"> ... </td>
  <td data-pos_id="202"> ... </td>
  ...
<tr>

但是，此方法有一个大问题：它依赖于数据集属性来唯一标识用户丢弃对象的位置，因此如果用户使用开发人员控制台或任何其他方法更改此属性，应用程序将无法按预期工作。我将发布一个关于此主题的新问题，我将继续进行测试以尝试解决此问题。
但是，此方法有一个大问题：它依赖于数据集属性来唯一标识用户丢弃对象的位置
这实际上不是一个大问题，考虑拖放是客户端功能。你总是可以影响行为。数据是存储在元素数据集中还是存储在脚本文件中并不重要。两者都可以更改，因为它们是客户端。嗨，谢谢你的回答。是的，一旦web数据被发送到客户端，用户就可以用它做任何他喜欢的事情。我们必须始终依赖服务器数据，而不是客户端的数据，因为这可能是一件痛苦的事情（想象一下，用户更改前端价格字段的值，应用程序使用该价格进行订单……）
el.addEventListener('drop', (e) => {
  ...

  // Event DOM path
  var path = e.path || (e.composedPath && e.composedPath());

  for(let elem of path) {
    // If the element has a data attribute called 'pos_id', it's a droppable <TD>
    if (elem.dataset && elem.dataset.pos_id) { 
      elem.classList.add('over');
      console.log('Dropped object on position '+elem.dataset.pos_id);

      break;
    }
  }

  ...
}