Angular - cdkDrag is not working with span tag

Question

I am using Angular Material's Drag and Drop Module. How ever cdkDrag doesn't seem to work with span and other few tags that I observed like 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'
  ]];
}

But, It works, if I replace span with div tag.

Any idea, why is this happening? And how to solve this issue?

Thanks in advance!

you need a cdkDragList and differents cdkDrag inside the cdkDragList -can not be the same tag- — Eliseo, Jun 17 '20 at 09:49
I didn't understand, could you explain more, with few examples? — ngShravil.py, Jun 17 '20 at 15:35
you has in ``, I supose you want `
` (I put in the way of answer) — Eliseo, Jun 17 '20 at 15:54

score 0 · Accepted Answer · answered Jun 17 '20 at 15:52

0

See that the cdkDropListis in the "div", not in the "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>

answered Jun 17 '20 at 15:52

Eliseo

50,109
4
29
67

Angular - cdkDrag is not working with span tag

1 Answers1