CODEWITHSUNDEEP
angulardrag-and-drop
Julien FEGER
Julien FEGER

Reputation: 327

Set a part of a draggable div as undraggable

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.

Upvotes: 2

Views: 2786

Answers (3)

Josh
Josh

Reputation: 331

For anyone else looking for a solution to this problem - per Bryan Sullivan's answer here: Is it possible to disable dragging on a sub-element of cdkDrag?

Just add (mousedown)="$event.stopPropagation()" to any child elements that you don't want to be draggable.

    <div class="sectionContainer">
        <div class="sectionParam" (mousedown)="$event.stopPropagation()">
            <!-- can't drag this -->
        </div>
        <div class="sectionContent">
            <!-- can drag this -->
        </div>
    </div>

Upvotes: 0

Julien FEGER
Julien FEGER

Reputation: 327

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.

Upvotes: 5

cucuru
cucuru

Reputation: 3718

yes, it exists a ckdDragDisabled property:

<div [cdkDragDisabled]="your_condition()">

you have the documentation here

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

Upvotes: 1

Related Questions