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数据属性，而可以使用'tagName属性来寻找'TD'元素。同样，我可以得到父级“ TR”。单元格具有cellIndex属性，行具有rowIndex，因此我可以使用这些值在构建表的源对象中查找单元格数据。

原始解决方案

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

首先，在HTML模板中，我已将pos_id数据属性和该单元格的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;
    }
  }

  ...
}

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

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

1 个答案: