Angular - cdkDrag не работает с тегом span

Question

Я использую Angular Material's Drag and Drop Module . Однако, похоже, что cdkDrag не работает с span и другими тегами, которые я заметил, например, a tag.

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>