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>