Set a part of a draggable div as undraggable

Question

I'm using the Angular Material CDK, in particular the drag and drop feature, I was wondering if there was any way to set one of the children div as undraggable, while still allowing the parent div to be dragged ?

    <div cdkDropList (cdkDropListDropped)="drop($event)">
        <div cdkDrag class="section" *ngFor="let section of sections">
            <sectionComponent dynamically appended trough a factory>
        </div>
    </div>

each section component is draggable into the parent cdkDropList. Here is the strucure of one section.

    <div class="sectionContainer">
        <div class="sectionParam">
        </div>
        <div class="sectionContent">
        </div>
    </div>

What i want is to be able to drag the entire section, but only when the origin of the drag comes from the sectionContent div. I have some sliders in the paramSection causing problems with the drag and drop feature.

Thanks for your time.

Answer 1

For people looking to do the same, drag n drop provide a directive. Use [cdkDragHandle] on a child div to create a block that will handle the drag of the parent element.