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
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):