0

我正在使用 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 单元格而不是父表，但我想避免它，因为表可以有数千个单元格。是否有可能（并且在性能方面值得）？

非常感谢，

4

1 回答 1

1

编辑：替代解决方案

我只是认为pos_id，我可以在遍历路径数组时查找“TD”元素（使用tagName属性），而不是查找数据属性。同样，我可以得到父'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指令中，在 drop 事件侦听器中，我使用path/ composedPathproperty/method 获取光标所在的 DOM 元素数组。然后，我遍历这个数组，寻找一个具有pos_iddataset 属性的元素，这将是我正在寻找的元素：

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

  ...
}

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

于 2018-07-23T08:59:37.343 回答