Copy Item with Drag and Drop in ListBox
Drag and Drop allows you to move items during run time from one position to another in the same or between different components. In some cases, during this process instead of moving the item(s), you may need to create a copy item and place it at target location.
In this article, you will learn how to create an item copy during drag and drop in dual ListBox components. A sample code is available in each JavaScript framework: Angular, React and Vue.
a suite of native Web Components for Angular, React and Vue
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In this demo, the ListBox has some items with drag and drop enabled. You can select an item and start dragging it from left to right. While over the right ListBox, to create an item copy, hold the SHIFT key and release the mouse button. In this way, instead of moving the original item, you have copied the item from left ListBox to the right one.
You can also create copies within the same ListBox component, or move/copy items from right to left, in general the functionality is the same.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
IntegralUI Web
Native Web Components for Angular, React and Vue
How to Copy an Item during Drag and Drop
When item is dragged, you can choose whether you want to move it or create a copy of it at target location within the same or a different component. Holding the SHIFT key changes the drag and drop from move to a copy operation. This is only required before drop, when you are sure of the target drop location.
During this process, a small copy icon will appear in top-center of dragged item showing that the item(s) will be copied when dropped.
Internally, during a copy operation a deep clone of the item object is created. This includes a copy of all custom data fields set by you. The only change is the id field that contains a unique identifier for each item. This allows you to have duplicates (in appearance or content) within the same lists, while still maintaining each item as unique one.
You can clear the selection from the first list, by calling clearSelection method when item(s) drops.
Create a Copy Item on Drop event in ListBox
The other way to create a copy item is to handle the dragDrop event and cancel the default drag and drop functionality and then adding your own custom operation. In this way, by intercepting the drag and drop you can create a copy item manually in your code using the cloneItem method. In this case, holding the SHIFT key is not required, because the item clone is created in code.
Conclusion
IntegralUI ListBox comes with built-in support for drag and drop operations that allows you to move or copy items. Creating an item copy during drag and drop is easy; you only need to hold the SHIFT key while item is dropped at target location. In other cases, you can also create an item copy manually in your code, using provided built-in methods
IntegralUI Web is an UI library of native web components that includes the ListBox. You can use it to develop web apps in Angular, React, Vue or any other JavaScript framework.