Angular Material cdkDrag拖拽，目标元素如何使用？

Question

我找不到任何关于如何使用 Angular Material “cdkDrag”拖动目标元素的文档。 每当拖动 Material 图标时，在这种情况下 drag-selector__controls 是否有可能拖动父元素？

这是拖动整个元素的当前示例。

<div cdkDrag class="drag-selector__controls" >
    <i class="material-icons">
        drag_indicator
    </i>
</div>

我想做的是这样的

<div #containerElement class="drag-selector__controls" >
    <i cdkDrag="containerElement" class="material-icons">
        drag_indicator
    </i>
</div>

提前致谢。

Answer 1

默认情况下，用户可以拖动整个 cdkDrag 元素来移动它。如果你想限制用户只能使用 handle 元素这样做，你可以通过将 cdkDragHandle 指令添加到 cdkDrag 内的元素来实现。

使用cdkDragHandle

<div cdkDrag class="drag-selector__controls">
    <i class="material-icons" cdkDragHandle>
        drag_indicator
    </i>
</div>

https://stackblitz.com/angular/ngdbdrajxqj?file=app%2Fcdk-drag-drop-handle-example.ts

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