Angular CDK Drag Drop - Transfer Item without Loss of Visibility

5
votes

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.

enter image description here

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.

2
angularangular-cdk
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 – chrismclarke
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. – chrismclarke
I hope we can find a solution. :) @chrismclarke – nazimmertbilgi
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 @chrismclarke – nazimmertbilgi
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 – chrismclarke

2 Answers

6
votes

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

0
votes

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