识别表格上HTML5拖放操作中的单元格

Question

我正在使用Angular应用程序中的HTML5拖放功能。 我有以下情况：

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

我已按照本教程中的步骤进行操作： https : //medium.com/@mithun_daa/drag-and-drop-in-angular-2-using-native-html5-api-f628ce4edc3b

并且我创建了以下应用程序： https : //stackblitz.com/edit/angular-vhyax1?embed=1&file=src/ app/ app.component.html

我已经将'makeDraggable'指令应用于HTML表，因此它接受drop事件。 我想知道是否有一种方法可以识别放置元素的表格单元格。 我知道我可以将'makeDraggable'指令添加到每个TD单元而不是父表中，但是我想避免使用它，因为该表可以包含数千个单元。 是否可能（就性能而言值得）？

非常感谢，

Answer 1

编辑：替代解决方案

我只是以为，可以遍历path数组而不是在查找pos_id数据属性时，可以查找'TD'元素（使用tagName属性）。 同样，我可以得到父级“ TR”。 单元格具有cellIndex属性，行具有rowIndex ，因此我可以使用这些值在构建表的源对象中查找单元格数据。

原始解决方案

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

首先，在HTML模板中，我将具有该单元格ID的pos_id数据属性添加到了可pos_id单元格中。 因此，它们看起来像：

<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>

第二，在makeDroppable指令，放置事件监听器里，我使用的path / composedPath属性/方法来获得DOM元素在其上光标的阵列。 然后，我遍历此数组以查找具有pos_id数据集属性的元素，这将是我正在寻找的元素：

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

  ...
}

但是，此方法存在一个大问题：它依赖于数据集属性来唯一标识用户放置对象的位置，因此，如果用户使用开发人员控制台或任何其他方法更改了此属性，则应用程序将无法正常运行预期。 我将发布有关此主题的新问题，并将继续进行测试以尝试解决此问题。