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

【问题标题】：Set a part of a draggable div as undraggable将可拖动 div 的一部分设置为不可拖动
【发布时间】：2019-08-29 12:31:02
【问题描述】：

我正在使用 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 中有一些滑块导致拖放功能出现问题。

感谢您的宝贵时间。

【问题讨论】：

您能向我们展示您的代码，以便我们提供帮助吗？
我添加了一些代码，希望对您有所帮助：/

标签： angular drag-and-drop

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

这里有文档

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

【讨论】：

它在我的情况下不起作用，因为我不想禁用整个元素的拖动，只禁用其中的一部分。我添加了一些代码来更好地解释它。我的可拖动 div 的 paramSection 中有滑块，这会导致拖放出现问题。

【解决方案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>

【讨论】：