javascript - 识别表格上 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 表，以便它接受放置事件。我想知道是否有一种方法可以识别删除元素的表格单元格。我知道我可以将“makeDraggable”指令添加到每个 TD 单元格而不是父表，但我想避免它，因为该表可以有数千个单元格。这可能吗(并且在性能方面值得)吗？

非常感谢，

Answer 1

编辑:替代解决方案

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

原始解决方案

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

首先，在 HTML 模板中，我向可放置单元格添加了带有该单元格 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 指令中，在 drop 事件监听器内，我使用 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;
    }
  }

  ...
}

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