Angular CDK Drag Drop - Transfer Item without Loss of Visibility

Question

It appears to have been activated when I examined the item. This class is:"cdk-drop-list-receiving". How do I do what I want not to be lost in any way? Thank you in advance.

Alternative Image URL: https://i.hizliresim.com/DOOkP6.gif

This is not a problem unique to me. You can also see the example. Perform a transfer operation, you will find that it is "hidden" from the list before you leave it. https://stackblitz.com/edit/angular-cdk-drag-drop

Don't let him disappear without releasing the element I want.

Answer 1

There are essentially two challenges here

1. Keep the top list of parts available for repeated drag drop (copy, instead of transfer items from the drop container)

2. Prevent the default trigger which removes an element from the drag list once it is over a different dropzone

The first one is quite simple, you can use the moveItemInArray method instead of transferItem, An example blitz is here:

https://stackblitz.com/edit/angular-xjex4y

The second challenge (so that it doesn't disappear even temporarily) seems to be more of a challenge, there is a large ongoing discussion here: https://github.com/angular/components/issues/13100

A workaround given can be seen here: https://stackblitz.com/edit/angular-cdkdrag-across-templates-using-ids

Answer 2

I like your product very much.

It's very easy to achieve your goal with ng-dnd. You can check the examples and have a try.

Making a DOM element draggable

<div [dragSource]="source">
  drag me
</div>

constructor(private dnd: DndService) { }

source = this.dnd.dragSource("DRAGME", {
  beginDrag: () => ({ name: 'Jones McFly' }),
  // other DragSourceSpec methods
});

Making a DOM element into a drop target

<div [dropTarget]="target">
  drop on me
</div>

constructor(private dnd: DndService) { }

target = this.dnd.dropTarget("DRAGME", {
  drop: monitor => {
    console.log('dropped an item:', monitor.getItem()); // => { name: 'Jones McFly' }
  }
})