Angular material cdkDrag drag and drop, how to use target element?

Question

I couldn't find any documentation on how to drag the target element with angular materials "cdkDrag". Is there a possibiity to drag the parent element in this case drag-selector__controls whenever the material icon is dragged?

This is the current example of dragging the whole element.

<div cdkDrag class="drag-selector__controls" >
    <i class="material-icons">
        drag_indicator
    </i>
</div>

What I would like to do is something like this

<div #containerElement class="drag-selector__controls" >
    <i cdkDrag="containerElement" class="material-icons">
        drag_indicator
    </i>
</div>

Thanks in advance.

Answer 1

By default, the user can drag the entire cdkDrag element to move it around. If you want to restrict the user to only be able to do so using a handle element, you can do it by adding the cdkDragHandle directive to an element inside of cdkDrag.

Use cdkDragHandle

<div cdkDrag class="drag-selector__controls">
    <i class="material-icons" cdkDragHandle>
        drag_indicator
    </i>
</div>

https://stackblitz.com/angular/ngdbdrajxqj?file=app%2Fcdk-drag-drop-handle-example.ts

https://material.angular.io/cdk/drag-drop/overview