将可拖动 div 的一部分设置为不可拖动

Question

我正在使用 Angular Material CDK，尤其是拖放功能，我想知道是否有任何方法可以将其中一个子 div 设置为不可拖动，同时仍允许拖动父 div？

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

每个部分组件都可以拖动到父 cdkDropList 中。这是一节的结构。

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

我想要的是能够拖动整个部分，但前提是拖动的起点来自 sectionContent div。我在 paramSection 中有一些滑块导致拖放功能出现问题。

感谢您的宝贵时间。

Answer 1

是的，它存在一个 ckdDragDisabled 属性:

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

这里有文档

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

Answer 2

对于希望做同样事情的人，拖放提供了一个指令。在子元素上使用 [cdkDragHandle] div 创建一个块来处理父元素的拖动。

Answer 3

对于正在寻找此问题解决方案的任何其他人 - 根据 Bryan Sullivan 的回答：Is it possible to disable dragging on a sub-element of cdkDrag?

只需将 (mousedown)="$event.stopPropagation()" 添加到任何您不想拖动的子元素即可。

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

将可拖动 div 的一部分设置为不可拖动

Set a part of a draggable div as undraggable

drag-and-drop

angular