拖放功能在Angular中不起作用

Question

我正在使用Angular 7并遵循本教程。 Tutorial

我复制并粘贴了示例源代码，但是它不起作用。 显示该框，但我无法移动它。

这是源代码。

HTML

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

CSS

  .example-box {
     width: 200px;
     height: 200px;
     border: solid 1px #ccc;
     color: rgba(0, 0, 0, 0.87);
     cursor: move;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     background: #fff;
     border-radius: 4px;
     position: relative;
     z-index: 1;
     transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
                 0 2px 2px 0 rgba(0, 0, 0, 0.14),
                 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.example-box:active {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
              0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

组件文件（.ts）

import {Component} from '@angular/core';

/**
 * @title Drag&Drop with a handle
 */
@Component({
  selector: 'map-manifest',
  templateUrl: './map.manifest.component.html',
  styleUrls: ['./map.manifest.component.css'],
})
export class MapManifestComponent {}

有人知道出什么问题吗？ 如果您知道这一点，请帮助我。