can't drag items to outside of a scrollable container-CodePudding

I am having trouble trying to drag an item from outside a container that has multiple lists. Here a stackblitz

https://stackblitz.com/edit/angular-2uj5gh

I added some overflow:visible styles but them the container just grows when I try to move it around.

I found that you need to clone to outside before scrolling but I have no idea how to do that in angular and with this library that I have to use.

Anyone has any idea how to solve this?

CodePudding user response：

Seems like you are using Angular Material.

You can add cdkDropList for the list component and cdkDrag for the children component.

So, your list will look like:

<ul fd-list cdkDropList>
  <ng-container>
    <li
      fd-list-item
      fd-dnd-item
      cdkDrag
      *ngFor="let value of values; trackBy: trackByFn"
    >
      <span fd-list-title> List item {{ value }} </span>
    </li>
  </ng-container>
</ul>

Read more about Drag and Drop in Angular Material here.

If you want to fully implement it, you can take a look at this simple example.