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.

Can you show us your code, so we can help ? – Random Aug 29 '19 at 12:50 — Random, Aug 29 '19 at 12:50
I added some code, hope it helps :/ – Julien FEGER Aug 29 '19 at 12:55 — Julien FEGER, Aug 29 '19 at 12:55

score 5 · Accepted Answer · answered Sep 02 '19 at 16:00

5

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.

answered Sep 02 '19 at 16:00

Julien FEGER

317
5
21

score 1 · Answer 2 · answered Aug 29 '19 at 12:52

1

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

answered Aug 29 '19 at 12:52

cucuru

3,456
8
40
74

3

It doesn't work in my situation cause i don't want to disable the dragging of the entire element, only a portion of it. I added some code to explain it better. I have sliders in the paramSection of my draggable div, which causes problems with the drag and drop. – Julien FEGER Aug 29 '19 at 12:57

score 0 · Answer 3 · answered Aug 12 '21 at 14:17

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>

This is not working, can you check once, instead $event.preventDefault() is working as expected. — Pavan, Nov 09 '22 at 14:48

Set a part of a draggable div as undraggable

3 Answers3