Allow to copy the dragged Item

[robinboehm]

So you could use the draggables as templates to construct some new datastructure

[codef0rmer]

Hey @robinboehm, thanks for the PR. May I know what problem does it solve?

[robinboehm]

Hey :)
I'm dropping mutiple components on a droppable area.
The model is added correct to the ng-model of the area.
But if I modify one item that I've dropped, every component of the same drag source is changed.
Because the reference to this object is n-times in the draggable area model.
But I want that these dropped items are usable Independently - so I need to copy the object instead just the reference.

[codef0rmer]

I believe angular.copy should use by default instead having an extra option, copy.

What do you say?

[robinboehm]

Would be more intuitive, but I don't know the impact to other use cases of your plugin - so I've made this optional :)

[ptand]

I am adding drag and drop support to the angular form builder component and I have been facing this issue where it adds new elements to the form by reference. Form elements are dragged from a sidebar and dropped to a form designer.
Due to the references whenever user changes the form element's property on the designer the sidebar also changes.
Copy would be better in cases like these

[mtraynham]

Unfortunately, you lose the prototypical inheritance chain with this. angular.copy is weird because it flattens all prototypical functions, thus convoluting any future prototype wrapping.

Can we add a property to specify shallow vs. deep copying?

When shallow copying, use:

dropItem = angular.extend({}, dropItem);

• Edit
  I think my only workaround so far has been to recreate the dropItem within the callback. This is done by having a prototype function called .toObject (alternatively it could be .toJSON) which returns the necessary values from the prototype object, then setting the drop index to new Pojo(dropItem.toObject()).

[codef0rmer]

@mtraynham: but what problem does it create by not having prototypical chain?

[mtraynham]

@codef0rmer You lose all references to the prototypical instance:
See this jsfiddle: http://jsfiddle.net/razh/bE5Va/
You'll have to open the console to see the output.

My point being, angular.copy produces Object and can no longer be used with prototype's instanceof. I was using that to render objects differently in the dropped container as well as some other case statements.

Now in the callback, if you received a shallow copy, you could recreate the instance with all of it's original properties.

I do have a work around, so no biggie, just throwing this out there.

As a side note, angular.copy returns an object with all prototype functions as constructor functions. Thus wrapping it again in the callback with the expected prototype inheritance will give you duplicate methods, with the constructor functions superseding the prototype ones. A bit convoluted and I am unsure of the issues that could introduce.