Угловой материал 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.

Use 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, , проверьте этот пример на странице документации по перетаскиванию :

<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.