首页 文章

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

提问于
浏览
0

Scenario :

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

  • 无需点击任何地方,只有图标可以点击并拖动整个div .

  • 现在下面的例子你可以点击并拖动那个div,我不想要那个 . 我只想点击图标并拖动该div与排序 .

Example : https://stackblitz.com/edit/angular-by5l4g

App URL : https://angular-by5l4g.stackblitz.io

Drag and Drop and Sorting

1 回答

  • 1

    Demo with only div draggable from the icon

    Application Code : https://stackblitz.com/edit/angular-drag-and-drop-example?file=src/app/app.component.ts

    Approach :

    • <i class="material-icons">reorder</i> 更改为
      <i class="material-icons" cdkDragHandle >reorder</i>

    • 使用 cdkDragHandle 使该图标可拖动,并从div中删除 cursor: move ,并将其应用于 <i> 标记 .

    Update 1 (according to checkbox question):

    • 另一个类似的 <i> 标记被保留为掩码,如果未选中复选框则不允许拖动开始,并且在复选框检查时我们启用该掩码消失,以便div可以从主 <i> 标记中拖动 .

    Update 2 (according to delete and add question):

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

相关问题