Reputation: 327
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
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
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
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