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

Question

场景：

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

• 没有点击任何地方，只有图标可以点击并拖动整个 div。

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

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

应用程序 URL : 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 使该图标可拖动，并从 div 中删除 cursor: move，并将其应用于 <i> 标签。

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

• 另一个类似的 <i> 标签保留为掩码，如果未选中复选框将不允许拖动开始，并且在选中复选框时我们启用该掩码消失，因此 div 是可从主 <i> 标签拖动。

更新二（根据删加题）：

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