Components: feat(drag-drop): prevent a item be removed when it into another container

[Eve-Sama]

Feature Description

CDK(V9) provide [cdkDropListEnterPredicate] to prevent a item into another container, provide (cdkDropListDropped) to determine how to do when user drop the item.

I found when user drag the item into another container but not to release, the item is removed in origin container. When I release it, I didn't add (cdkDropListDropped), so the item is recovered. But what I want is the item can into another container but not to be removed in any time.

In summary, can you provide (cdkDragLeaved) to determine how to deal with the item when the item into another container?

Use Case

Just imaging you are ordering foods from menu in the restaurant. You need to drag the food into your shopping cart. But the item of the menu should't be removed.

[devversion]

Hi @Mr-Eve. great issue! thanks. I think what you are trying to achieve should be partially possible already by just not using the move or transfer utilities the drag-drop provides, but rather by "copying" the element. For example:

    if (event.previousContainer.id === 'menu') {
      event.container.data.splice(event.currentIndex, 0,
        event.previousContainer.data[event.previousIndex]);
    }

The only problem I see here is that the drag placeholder from the menu list is temporarily removed when the item is being dragged over the Shopping cart drop list. cc. @crisbeto

[Eve-Sama]

Sorry, I'm not clear your meaning. The problem is , I have to use the way of drag to pick up the item of menu. I can't determine how to deal with the item when it into another container. The item is temporarily removed is default action.

[blankplanet]

When multiple cdkDropList exist, and those list are connected each other with droplist group or list connection.
After starting drag on source-list it generate placeholder, and when dragging item enter into destination-list,
placeholder also move to destination-list.

how can prevent placeholder disappear in source-list while dragging over other connected-list?
there are some messy way that save placeholder element and insert it after exit source-list,
but i hope there are a new way like stop list DOM manipulation by cdk when drag exited list.

[Eve-Sama]

I solved it by a hack way. I think there is a long time during the CDK add this feature, if your really nedd it, you can try below code

<!-- In this demo, user can select item of Menu to Shopping Car -->
<!-- 
  The core point is catch the life cycle of drag and drop
  What I did is add data when the item is removed, and remove data when the data is recoveried.
  1. When user drag the item into another container, (cdkDropListExited) is fired, but the item is removed by CDK. 
  2. Therefore, you need to add a fake data into origin container, then user can't find different at all.
  3. When user release mouse, (cdkDropListDropped) is fired, you can do something bussiness logical 
     and delete the item that you added just now.
-->

<!-- the Menu container -->
<ul
  cdkDropList
  cdkDropListSortingDisabled
  (cdkDropListEntered)="deleteFakeData()"
  (cdkDropListExited)="addFakeData($event)">
  <!-- cdkDragData will keep data to the another container -->
  <li cdkDrag [cdkDragData]="1">something1...</li>
  <li cdkDrag [cdkDragData]="2">something2...</li>
  <li cdkDrag [cdkDragData]="3">something3...</li>
</ul>

<!-- the Shopping Car container -->
<ul
  cdkDropList
  (cdkDropListDropped)="dropAndDeleteFakeData($event)">
  <li>something1...</li>
  <li>something2...</li>
  <li>something3...</li>
</ul>

<!-- 
  Maybe your are confused why need (cdkDropListEntered) event to delete item, because regular operation is fine, 
  but maybe user drag the item into another container but not to release, then move mouse back to origin container. 
  In this situation, the origin container will have 2 items(becase you add fake data in addFakeData event) 
 -->

[andreElrico]

@Mr-Eve is what you want a copy feature? something like here?

https://stackblitz.com/edit/angular-krmecd (from #13906)

Check https://github.com/angular/components/issues/13906

• If thats what you want, close this one and put a thumbs up on issue #13906
• There are also some workarounds provided.

[Eve-Sama]

@andreElrico yes, but it looks not under angular enviroment?