Support copying items from source container

[TKul6]

trafficstars

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

When dragging (in order to copy) items from the source container the item should not leave the _initalContainer. In addition, when the item is being copy, the sorting behavior should be disabled (Not sure about that...)

What is the current behavior?

Currently the items can not really be copied to another container, There was basic support developed to solve #13100, but still the UX is not so friendly (the item is disappeared from the source container and then re added), I think it would be best if the item will remained in its old position and not disappear.

What is the use-case or motivation for changing an existing behavior?

The user preform search and then the results appears in a table, I want to be able to copy the items from the search results to designated zones (which might already include items) without loosing the item in the search list

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Is there anything else we should know?

I started to work about some simple example 4a5b254. (it is in very early stage, but it should explain the basic behavior).

What do you say? Thanks,

[shanedev6]

I too agree with the proposed behavior. It also feels natural for the drop to be able to be in any position instead of the current position from the previous list similar to what occurs in the transferArrayItem.

Example App: https://stackblitz.com/edit/mat-drag-drop-xfdfuh

[kingecg]

I also need this feature. A common use case is pick some component from a components list to view

[Harpush]

Very much needed for repository like UI where you add components by dragging them but they are never removed from the source list

[tchunwei]

Check this out, manage to get some "copy" behavior working https://stackblitz.com/edit/angular-krmecd

[clabough]

Check this out, manage to get some "copy" behavior working https://stackblitz.com/edit/angular-krmecd

Thanks @tchunwei Hopefully they can get this functionality implemented natively.

[jelbourn]

We started talking about potential APIs for this today; no ETA or anything like that, but we're thinking about it

[jeneg]

Yes, please. Copy behavior without blinking of source item is really needed. @tchunwei thanks for reference

[DerekJDev]

Any update on this?

[Eve-Sama]

Check this out, manage to get some "copy" behavior working https://stackblitz.com/edit/angular-krmecd

Method getItemIndex was deprecated in v10

[norsemangrey]

Anything happening on this issue?

[kkelyi]

Check this out, manage to get some "copy" behavior working https://stackblitz.com/edit/angular-krmecd

Method getItemIndex was deprecated in v10

https://stackblitz.com/edit/angular-ivy-t4qdiq?file=src/app/app.component.html

you don't need getItemIndex and lodash

[BenRacicot]

@jelbourn had an idea for this problem,

It's a very clunky UX to not be able to show the user where their "dragging" element came from.

copy could simply be a boolean option on origin location options.

I'm open to helping in any way I can.

[rodcisal]

any solution to this issue? I'd love to be able to copy elements from one list to another, I have a very long source list that when gets mutated (element removed from it) it causes performance problems

[avinash1203]

It will be nice to have this.

[avrit]

its just a simple flag, can you add this?

[louis-lau]

any solution to this issue? I'd love to be able to copy elements from one list to another, I have a very long source list that when gets mutated (element removed from it) it causes performance problems

Though I'm all for solving this issue, it doesn't sound like a solution to your performance problem. Are you using trackBy? For very very long lists that are simply too much for the browser I'd check out virtual scrolling.

[joelkesler]

I also have a use for this.

We are building an interactive editor, with the idea that you can drag objects from a list of items into the editor window to add a new instance of that item. Having the ability to copy one cdkDrag into a specific cdkDropList would be lovely

[JWess]

I have a UI where I need to be able to drag-and-drop employees from the "Employees" area to one or more crews in the "Crews" area. However, employees can be drug to multiple crews, so I don't want them to act like they are leaving the Employees list and then suddenly "reappear" when the drop happens.

[BenRacicot]

Hey @andrewseguin, is this copying from a source feature no longer being considered for Angular's drag and drop?

[JJKid]

Any updates on this feature??

[lappjeff]

Still waiting for this, would love to get an update from someone!

[RandomNameUser]

Just to add another vote for this. It doesn't seem like a complicated request, but there are quite a few use cases that require it...

[ng-sp7]

Thread is open since last 4 years. Any update on this feature?

[DerekJDev]

For anybody waiting on this, if you're looking for a solid replacement, check out SortableJS.

[Moku151]

Any updates on this feature?

[louis-lau]

Any updates on this feature?

Another person asked this a month ago, on this issue that's been open for 5 years. If there were updates, they would be visible here. A bunch of people are subscribed to this issue for actual updates and will get notified when you ask this useless question. Can we all agree to stop asking it? If you have nothing to add to the discussion, just add a +1 to the issue and subscribe to notifications.

[Moku151]

I empathize with your frustration regarding my previous comment. However, my intention was to highlight the ongoing demand and importance of addressing this issue. The fact that multiple users keep asking about it underscores the widespread need for a solution.

[BenRacicot]

IMO you're both right and I must add that I've copied the CDK's drag-drop package over to a new repo and am working on the stale features I/we need. If you'd like to participate that would be great.

github.com/Recruitler/drag-drop

Finishing nestable drag and drop lists then working on making it an NPM package.

[guoliang]

While waiting, what are everyone else using instead, or can suggest some temporary solution?

[louis-lau]

While waiting, what are everyone else using instead, or can suggest some temporary solution?

I just create another instance of the component while dragging. It's hacky but it works, to the user it looks like it never moves.