cdkDragHandle не работает внутри дочернего компонента

Использование @angular/cdk 7.2.1: при определении родительского компонента, содержащего cdkDropList и вложенный список компонентов cdkDrag, определение cdkDragHandle внутри вложенного дочернего компонента не работает. Если одна и та же структура находится в одном компоненте, cdkDragHandle работает отлично.

https://stackblitz.com/edit/angular-wfvmuj?embed=1&file=src/app/hello.component.html

Кто-нибудь нашел исправление, позволяющее заставить cdkDragHandle работать, даже если оно не определено в том же компоненте, что и cdkDrag?


angular drag-and-drop angular-cdk
person Simon    schedule 19.02.2019    source источник
comment
Найдена проблема: github.com/angular/material2/issues/13784   -  person Simon    schedule 20.02.2019

Ответы (3)


arrow_upward
18
arrow_downward

Это решение сработало для меня:

Родительский компонент:

<div cdkDropList #list="cdkDropList"
  [cdkDropListData]="myArray"
  (cdkDropListDropped)="drop($event)">

  <app-item
    *ngFor="let item of myArray"
    cdkDrag>
    <div cdkDragHandle></div>
  </app-item>

</div>

Дочерний компонент (элемент приложения):

<div class="drag-container">
  <ng-content></ng-content>
  <div class="drag-handle">drag here</div>
</div>

Затем стилизуйте класс cdk-drag-handle в родительском компоненте. cdk-drag-handle поставляется с материалом, поэтому нам не нужно применять его вручную:

.cdk-drag-handle {
   width: 100%;
   height: 100%;
   position: absolute;
   z-index: 100;
   background-color: transparent;
   cursor: move;
 }

Затем стилизуйте контейнер перетаскивания с помощью position: relative и чего хотите. У меня есть элемент внутри него (дескриптор перетаскивания), который также занимает всю ширину и высоту контейнера, который содержит изображение (просто в качестве примечания).

person lajuma    schedule 24.07.2019
comment
Спасибо, lajuma, за предложенное решение. Это в основном то, что предлагается другими в указанной выше ссылке на проблему, github.com/angular/material2/issues/13784. - person Simon; 25.07.2019

arrow_upward
6
arrow_downward

Это сработало для меня: вместо использования cdkDragHandle просто остановите распространение события нажатия мыши, как показано ниже. Затем можно перетаскивать только заголовок.

<div>
  <header></header>
  <body (mousedown)="$event.stopPropagation()"></body>
</div>

person AllenSS    schedule 09.01.2020
comment
Это сработало отлично! - person Roopesh Reddy; 03.06.2021

arrow_upward
2
arrow_downward

Не уверен, когда это было добавлено, установка cdkDragRootElement в дочернем элементе сработала для меня.

В дочернем компоненте <div cdkDrag cdkDragRootElement="app-bot-prompt-selector"> app-bot-prompt-selector является родительским элементом, который необходимо перетаскивать.

https://material.angular.io/cdk/drag-drop/api#CdkDrag

person Exlord    schedule 07.11.2020