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.

Izzo

What exactly is the problem with the visibility? Is there something you can or cannot see? Is it possible to include a code sample to look at – Duteous

the graphic makes it a lot more clear, thanks, although I'm not sure where the issue is coming from. If you could reproduce a minimal repo that would be useful. – Duteous

I hope we can find a solution. :) @Duteous – Izzo

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. stackblitz.com/edit/angular-cdk-drag-drop @Duteous – Izzo

Ah, I see. Yes the problem is in the drop event logic, if you don't want it to disappear from the top then you want to keep it in the items array representing the images. You will want to manually change the logic from when to push/pop array values – Duteous

Can you show me an example? 🙄 @Duteous – Izzo

Okay, this one definitely goes a bit deeper than I first thought! Will add a proper response below – Duteous

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

Duteous

Another solution here might be to just stack multiple elements on top of each other as only six tires can be placed anyway. – Heatherheatherly

Yes that is the approach taken in the second blitz. Not pretty, but if it gets the job done! – Duteous

Nice workaround! I think this issue could be even more simplistic because it's not just about "copy" functionality in this CDK. It's really clunky to not be able to show the user where the "dragging" element came from. copy could simply be a boolean option on the origin location options. – Barny

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' }
  }
})

Guesswarp