Drag and Drop with sorting it is possible in Angular Material?

Question

Scenario :

• From Angular Material cdk version 7.0.3 we have Drag&Drop sorting.
  In that Drag&Drop, everywhere in that div we can click and drag.

• Without click everywhere, only icon will be clickable and drag that entire div.

• Now below example u can click and drag that div everywhere i don't want that. i want only click in icon and drag that div with sorting.

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

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

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

• Change <i class="material-icons">reorder</i> to
  <i class="material-icons" cdkDragHandle >reorder</i>
• Used cdkDragHandle to make that icon draggable, and removed the cursor: move from div, and applied it to <i> tag.

Update 1 (according to checkbox question):

• another similar <i> tag is kept as mask which will not allow drag start if checkbox is not checked, and on checkbox check we enable that mask to go away, so that the div is draggable from the main <i> tag.

Update 2 (according to delete and add question):

• added delete and add functionality also.