Currently I am working on a project that has a few jQuery sortable lists on the page. One of the new features that I wanted to implement was the ability to copy elements from one sortable to another. I couldn’t see any option for this in the standard sortable so I decided to see how hard it would be to add.
Example of sortable element copying between connected sortables.
The example that got me started was from a question by Peter Boughton on stackflow. In his question/example, Peter was trying to control what happened with a sortable based upon where it was being dragged to/from. My use case was slightly different but the example brought the receive event to my attention.
Using the receive event for the sortable I was able to check to see if the ctrlkey was pressed and use that to trigger the copy functionality. If the ctrl key is pressed I can trigger the cloning, if it is not pressed I just leave it alone and let it act as normal.
The hard part was to determine just where to place the cloned item. I wanted the original sortable to keep the same ordering and the item to still be placed where it was dropped in the new sortable. The receive event itself does not stop the element from being placed into the new sortable, hence the clone would need to be placed back into the original sortable in the previous index slot.
To accomplish the correct ordering I use the updateAreas() to update the index of the sortable items before anything happens and after every update is complete. This gives me the previous index for clone positioning since it happens before the update triggers.
Here is the source behind it all: