Краткий итог: перетаскивание отлично работает на Stackblitz , но тот же код на моем локальном компьютере не работает.
Подробно
Я сделал пример для Stackblitz , и он работает как положено: 
Примечание:
- диалог может только перемещаться через элемент
h4, который cdkDragHandle - пытается переместить диалог через другие элементы (например, красный основной
div), теперь работает
Так на Stackblitz все в порядке, но проблема в том, что это не работает на моей локальной машине разработчика:
Примечание мы Можно даже переместить диалоговое окно с помощью красного основного div!
Итак, вот что я сделал на своей локальной машине:
- скачал и извлек источник Stackblitz
npm install npm start - открыть приложение в том же окне браузера, что и в примере с Stackblitz
- Stackblitz работает как положено, локально приложение не
Другие примечания:
- Сначала я подумал, что некоторые зависимости могут отличаться, поэтому я изменил все версии в
package.json, чтобы они были исправлены (т.е. удалили * 1059) * и ~) - Я сравнил html и css в chrome -dev инструментах, но AFAIK они одинаковы (особенно
cdkDrag itmes)
Есть идеи, что может вызвать эту проблему?
Sidenote - я нашел обходной путь, который должен иметь cdkDragHandle для отдельного элемента.
Но это будет означать изменить много кода в наших приложениях, и я действительно не понимаю, почему обходной путь помогает вообще.
Оригинал не работает
<div class="example-dialog-content" >
<h4 cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle
class="drag-handle">Drag here</h4>
<div style="background-color:red; height: 120px">Content cannot be dragged</div>
</div>
Обходной путь
<div class="example-dialog-content" cdkDrag cdkDragRootElement=".cdk-overlay-pane" >
<h4 cdkDragHandle
class="drag-handle">Drag here</h4>
<div style="background-color:red; height: 120px">Content cannot be dragged</div>
</div>
Обратите внимание, что cdkDrag и cdkDragRootElement теперь на родительском div (больше не на h4)