9

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.

chrismclarke
  • 1,995
  • 10
  • 16
nmb
  • 124
  • 1
  • 9
  • 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 Aug 22 '19 at 18:43
  • 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 Aug 22 '19 at 18:44
  • I hope we can find a solution. :) @chrismclarke – nmb Aug 22 '19 at 18:48
  • 2
    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 @chrismclarke – nmb Aug 22 '19 at 18:57
  • 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 Aug 22 '19 at 19:08
  • Can you show me an example? @chrismclarke – nmb Aug 23 '19 at 06:31
  • Okay, this one definitely goes a bit deeper than I first thought! Will add a proper response below – chrismclarke Aug 23 '19 at 11:34

2 Answers2

7

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

chrismclarke
  • 1,995
  • 10
  • 16
  • 1
    Another solution here might be to just stack multiple elements on top of each other as only six tires can be placed anyway. – Ingo Bürk Aug 24 '19 at 07:32
  • 1
    Yes that is the approach taken in the second blitz. Not pretty, but if it gets the job done! – chrismclarke Aug 24 '19 at 09:18
  • 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. – Ben Racicot Dec 17 '21 at 21:03
1

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' }
  }
})
nzbin
  • 99
  • 1
  • 5