在Angular Material中可以拖放进行排序吗？

Question

场景：

• 从Angular Material cdk版本7.0.3起，我们进行了拖放排序。
  在该拖放操作中，我们可以在该div中的任意位置单击并拖动。

• 如果没有在所有位置单击，将仅单击图标并将整个div拖动。

• 现在在下面的示例中，您可以在不需要的任何地方单击并拖动该div。我只想点击图标并拖动该div进行排序。

示例： https://stackblitz.com/edit/angular-by5l4g

应用程序网址： https://angular-by5l4g.stackblitz.io

Answer 1

Demo with only div draggable from the icon

应用代码： https://stackblitz.com/edit/angular-drag-and-drop-example?file=src/app/app.component.ts

方法：

• 将<i class="material-icons">reorder</i>更改为
  <i class="material-icons" cdkDragHandle >reorder</i>
• 使用 cdkDragHandle 使该图标可拖动，并将cursor: move从div中删除，并将其应用于<i>标签。

更新1（根据复选框问题）：

• 另一个类似的<i>标签保留为遮罩，如果未选中该复选框，则不允许拖动开始，并且在复选框中，我们使该遮罩消失，因此div可从主{{ 1}}标签。

更新2（根据删除和添加问题）：

• 还添加了删除和添加功能。