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

Question

我找不到任何关于如何使用角材料“cdkDrag”拖动目标元素的文档。在这种情况下，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