Сделать диалоговое окно Angular перетаскиваемым только по заголовку

#angular #draggable #angular-cdk-drag-drop #material-dialog

#angular #перетаскиваемый #angular-cdk-drag-drop #материал-диалог

Вопрос:

Я уже делал это:

 <div mat-dialog-title
     cdkDrag
     cdkDragRootElement=".cdk-overlay-pane"
     cdkDragHandle>
</div>

Но решение делает диалоговое окно перетаскиваемым при нажатии на любое место окна, что делает невозможным расширение <textarea> внутри блока содержимого.
В идеале мне нужен способ сделать его перетаскиваемым только щелчком по заголовку.

Ответ №1:

Установите cdkDrag для элемента, который вы хотите перетаскивать. Удалите cdkDragRootElement, поскольку в этом нет необходимости. Оставьте дескриптор cdkDragHandle там, где он есть, и он должен работать.

  <mat-card cdkDrag>
  <mat-card-header cdkDragHandle>
   Text
  </mat-card-header>
 </mat-card>

1. Я хочу, чтобы все диалоговое окно было перетаскиваемым, как сейчас, но не тогда, когда я нажимаю на любую другую часть окна, кроме заголовка.

2. Я понимаю, и это должно быть результатом моего ответа. Я протестировал это, и это сработало для меня

3. Да, вы правы, это действительно работает, я добавил оболочку div вокруг всего HTML-кода компонента, и требуется cdkDragRootElement=».cdk-overlay-pane», потому что в противном случае он перетаскивает содержимое, но основной элемент остается в том же положении.

Ответ №2:

Я смог использовать ответ Дарио, объединив его с предложением Супервизора. Для наглядности результатом стал диалог, перетаскиваемый через заголовок.

HTML следующим образом:

 <div cdkDrag cdkDragRootElement=".cdk-overlay-pane">

    <h2 mat-dialog-title cdkDragHandle>Title Here</h2>

    <mat-dialog-content>
    ... Content here
    </mat-dialog-content>

    <mat-dialog-actions>
    ... Actions here
    </mat-dialog-actions>
</div>