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

Answer 2

我认为您可以使用cdkDragHandle，check this example from the Drag and Drop documentation page实现相同的行为：

<div class="example-box" cdkDrag>
  I can only be dragged using the handle

  <div class="example-handle" cdkDragHandle>
    <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
      <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path>
      <path d="M0 0h24v24H0z" fill="none"></path>
    </svg>
  </div>
</div>

他们使用SVG绘制手柄图标，但您可以改用mat-icon元素。

角材料cdkDrag拖放，如何使用目标元素？

2 个答案: