識別表格上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;
    }
  }

  ...
}

但是，此方法存在一個大問題：它依賴於數據集屬性來唯一標識用戶放置對象的位置，因此，如果用戶使用開發人員控制台或任何其他方法更改了此屬性，則應用程序將無法正常運行預期。 我將發布有關此主題的新問題，並將繼續進行測試以嘗試解決此問題。