Angular - cdkDrag 不适用于 span 标签

Question

我正在使用 Angular Material 的 Drag and Drop Module。 cdkDrag 似乎无法与 span 和我观察到的其他一些标签一起使用，例如 a 标签。

component.html

<div class='user' *ngFor='let user of usersTask; let i = index'>
  User:  {{i}}
  <span class='task' *ngFor='let task of user' cdkDropList cdkDrag>
    {{task}}
  </span>
</div>

component.ts

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

@Component({
  selector: 'some-root',
  templateUrl: './some.component.html',
  styleUrls: ['./some.component.scss']
})
export class SomeComponent {
  usersTask = [[
    'Get to work',
    'Pick up groceries',
    'Go home',
    'Fall asleep'
  ],[
    'Get up',
    'Brush teeth',
    'Take a shower',
    'Check e-mail',
    'Walk dog'
  ]];
}

但是，如果我将 span 替换为 div 标签，它会起作用。

知道为什么会这样吗？以及如何解决这个问题？

提前致谢！

Answer 1

看到 cdkDropList 在 "div" 中，而不在 "span"

中

<div class='user' *ngFor='let user of usersTask; let i = index' cdkDropList >
  User:  {{i}}
  <span class='task' *ngFor='let task of user' cdkDrag>
    {{task}}
  </span>
</div>