Clone item within the same list?

[CLGitDev]

I'm working on an AngularJS app with two sortable lists connected with each other. There are a few extra operations needed in addition to the normal sortable list behavior, which I'm experiencing difficulties in implementing:

1. There will be two sets of handle presented to the users within the same list (for instance, .sortable-handler and .clonable-handler), in which one will be used to move item on drag (i.e. normal sortable behavior) and the other will be used to clone item on drag. Is there a way to tell which handle is being used and assign different sortable options accordingly?
2. Item clone is applicable within the list, as well as to the connected list. I've seen an example of cloning from the closed issue Draggable clone #138 , which restores the ng-model of the source list when the stop event is triggered. However this is not applicable to my case as item clone within the list is required. What is the best way to achieve this?

Thanks in advance for your advices!

[thgreasi]

You should be able to retrieve the handle element that was used for the
drag using either the e or the ui arguments from the sortable
callbacks. Otherwise you could add a ng-click on the handler elements and
set an appropriate value to a variable like isCloneHandlerUsed. (The second
sounds more like the angular way.)
Finally in the stop (or update, I can't remember which one is more
appropriate) callback you should follow the same logic for cloning and
placing the model of the dragged element back in its original position.
PS: take care for track by errors.

Thodoris Greasidis
Computer, Networking &
Communications Engineer

[CLGitDev]

@thgreasi Thanks for your advice. I've kinda incorporated them into my app and they worked well.

A few words to enrich the answer:

1. Using a variable to store the state is a good start. However, ng-click doesn't work as it is not triggered until the mouse button is released. So I've used ng-mouseover instead.
   
2. Instead of cloning the item at the stop event, I did it at the start event to make it look better (but need extra handling on event cancellation). Below is an illustration with a list of three items:

• Cloning at the stop event - when an item is dragged, there will only be two items left in the list; on drop there will be four. Cons: Doesn't look very nice.
• Cloning at the start event - when an item is dragged, there will still be three items in the list; on drop there will be four. Cons: Extra handling to remove the cloned item on cancellation.

[thgreasi]

Nice to hear that you made it work.
Should this be closed now?

[CLGitDev]

Sure, thanks once again for your help!