cdk Drag and Drop: item cannot be dropped in empty list

[duck74]

What are you trying to do?

I built a timeline where you can move items between the rows. However, if the row is empty, then I am not able to add an item there anymore. The CSS is quite intense and I am using (nested) css-grids, so maybe thats the reason, but maybe I have overlooked something.

When I use the same data and approach with the example code and css provided in the documentation, it works as expected.

Reproduction

The following stackblitz shows my approach:
https://stackblitz.com/edit/angular-etrqvm

Steps to reproduce:

1. Move all items from one list into the other list
2. try to move one item back into the empty list

Environment

• Angular: 8.0.1
• CDK/Material: 8.0.1
• Browser(s): Chrome (latest version)
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[duck74]

I tried using the directives from here #14099 but it does not seem to work.

[andrewseguin]

There seems to be a problem in your app, I can't seem to get dragging to work at all. Can you double-check that it is working like you want?

[duck74]

sorry, I tried something and that did not work out and I forgot to undo it.
Now it is back to its original state. Thanks!

[AshotAleqs]

Hello everyone, Sorry I can't save my code on the stackblitz.com, and I want share working example here. I added empty item when list is empty and it start working.

<div class="gantt example-list">
 <div class="gantt__row gantt__row--hours">
    <div class="gantt__row-first"></div>
    <span>7:00-8:00</span><span>8:00-9:00</span><span>9:00-10:00</span>
    <span>10:00-11:00</span><span>11:00-12:00</span><span>12:00-13:00</span>
    <span>13:00-14:00</span><span>14:00-15:00</span><span>15:00-16:00</span>
    <span>16:00-17:00</span><span>17:00-18:00</span><span>18:00-19:00</span>
    <span>19:00-20:00</span>
  </div>
  <div class="gantt__row gantt__row--lines">
    <span></span><span></span><span></span>
    <span></span><span></span><span></span>
    <span></span><span></span><span></span>
    <span></span><span></span><span></span><span></span>
  </div>
  
  <div class="gantt__row" #todoList="cdkDropList" [cdkDropListData]="todo" cdkDropList (cdkDropListDropped)="drop($event)" 
  [cdkDropListConnectedTo]="[doneList]">
    <div class="gantt__row-first">
      Barnard Posselt
    </div>
    <div class="gantt__row-bars">
      <div cdkDrag *ngFor="let item of todo" style="grid-column: 1/11; margin: 0 10px; background-color: #00B7A8;">{{item}}</div>
         <div style="grid-column: 2/5; background-color: red;opacity: 0" *ngIf="todo.length === 0"></div>
    </div>
  </div>
  <div class="gantt__row" #doneList="cdkDropList" [cdkDropListData]="done" cdkDropList (cdkDropListDropped)="drop($event)"
  [cdkDropListConnectedTo]="[todoList]">
    <div class="gantt__row-first">
      Ryley Huggons
    </div>
    <div class="gantt__row-bars">
        <div cdkDrag *ngFor="let item of done" style="grid-column: 2/5; background-color: red;">{{item}}</div>
        <div style="grid-column: 2/5; background-color: red;opacity: 0" *ngIf="done.length === 0"></div>
    </div>
  </div>
</div>

[duck74]

Thanks a lot, I put it into the stackblitz and it works, but I am not quite sure, if this would be the desired behavior

[AshotAleqs]

I have almost the same dragging problem inside the material expansion panels, but the solution that worked in this example did not help me solve my problem. In my case, dragging an object to an empty list works, but not as it should. (sometimes it is impossible to put the dropped container).

[duck74]

I had this problem as well, when the empty container was the last one, it worked, but only if I dragged it somewhere outside a bit beneath, then the empty container would expand and I could drop it

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}