背景

在项目中有些交互会弹出一个窗口，而这个窗口需要能够拖拽移动的效果，如何实现？

可以使用materialCdk去实现拖拽效果

步骤

1. 设定可拖拽的容器
2. 设定通过哪个部位拖拽
3. 限定窗口能够拖拽到的边界

1. 设定可拖拽的容器

当你明确哪个元素是你想要拖拽的时候，给这个元素的标签上加上cdkDrag,加上之后，即可拖动元素了

<div class="example-box" cdkDrag>
Drag me around
</div>

2. 设定通过哪个部位拖拽

当你根据上一步加上了cdkDrag之后，你可以按住这个标签内部的任何一个子元素进行拖动。

但如果你想限定只能通过其中的某个具体元素进行拖拽的话，就需要给这个元素的标签上加上cdkDragHandle，如

<div class="example-box" cdkDrag>
  I can only be dragged using the handle
  <!-- 这里就是在设定只能按住标题栏进行拖拽-->
  <div class="titleBar cdkDragHandle>
    ...
  </div>
  <div class="contents>
    ...
  </div>
</div>

3. 限定窗口能够拖拽到的边界

在你完成上面两步之后，你已经可以开心的拖拽你的元素了。但与此同时你会发现个问题，就是你这个元素是能够被拖拽到窗口可视区域之外的

要想阻止一个可拖拽元素A可以被拖拽到另一个元素B的外部，你可以将B的css选择器传递给cdkDragBoundary 这个属性。它的原理就是根据这个选择器去找到匹配的元素，然后禁止可拖拽元素超出这个元素的外部。如：

<div class="example-boundary">
  <div class="example-box" cdkDragBoundary=".example-boundary" cdkDrag>
    I can only be dragged within the dotted container
  </div>
</div>

以上，就是实现一个元素拖拽的全部操作。