angular - 在Angular Material中可以拖放排序吗？

Question

设想 ：

• 从 Angular Material cdk 版本 7.0.3 我们有拖放排序。
  在那个 Drag&Drop 中，我们可以在该 div 中的任何地方单击并拖动。

• 如果不到处点击，只有图标可以点击并拖动整个 div。

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

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

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

Answer 1

仅可从图标拖动 div 的演示

应用程序代码： 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>的标签保留为掩码，如果未选中复选框，则不允许拖动开始，并且在选中复选框时，我们使该掩码消失，以便可以从主<i>标签拖动 div。

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

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