search

reppners / ngx-drag-drop

Angular directives using the native HTML Drag And Drop API
https://reppners.github.io/ngx-drag-drop/
BSD 3-Clause "New" or "Revised" License
300 stars 119 forks source link

'copyMove' from source list to target list #12

Closed mtraynham closed 6 years ago

mtraynham commented 6 years ago

Hey, just wanted to first say thanks for porting drag-and-drop-lists to Angular 2+ :smile:. Was a big fan of the old library and all the other alternatives (both ng1 & ngx) have a bunch of issues...

I had a question about drag/drop copyMove, and we can use the "Lists" example from your demo to discuss.

Two of the elements on the left have effectAllowed: move and one is effectAllowed: copyMove. I had to dig through the source code a bit to understand how copyMove here is actually different. It seemed that everything I was doing was just a move operation. I finally stumped upon holding down the ctrl key.

Albeit everything there seems to work properly, I interpreted copyMove as:

Is there a way to perform the above functionality? It seems a bit intuitive that a user hold the ctrl key.

reppners commented 6 years ago

Good question!

Actually the original library has a good write down on this, see https://github.com/marceljuenemann/angular-drag-and-drop-lists/wiki/Drop-Effects-Design

Especially this sentence contains the interesting part

The default effect is always move if it is allowed. 
Otherwise copy is preferred over link.
Note that this precedence is not defined by the HTML5 spec,
but rather something we choose for angular-drag-and-drop-lists.

It is really up to the library on how to implement what takes precedence when multiple effects are allowed. Your use-case sounds reasonable but it really depends on invididual application requirements. I think its close to impossible to implement a general approach on the library level that works for the different application requirements.

A way to implement your use case could be to set the effectAllowed of the drop zones dynamically to either copy or move based on some information when dragging of an item starts. This of course only works when your application does not need the ability to optionally move an item to a different list instead of copying.

mtraynham commented 6 years ago

@reppners Thanks for the very detailed answer. I'll go with the approach you mentioned!

By the way, I might open a PR or two. I was hoping we could bubble the dragEvent so scrolling can work on drag, as well as possibly moving the drag event outside the Angular Zone so you don't get a crazy amount of change detection events.