Drag Drop Between Two TreeView Components
IntegralUI TreeView comes with built-in functionality that allows you to drag and drop nodes within the same TreeView or to other web components. Drag Drop operations are accompanied with events that allows you to customize this process in whole.
In following sections below, you will find sample code in JavaScript, Angular, React and Vue that shows drag and drop functionality between two TreeView components.
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, you can drag and drop nodes from left to the right TreeView and vice versa. When node is dragged you can choose whether you want to move it at drop position or place an exact copy of it by holding the SHIFT key. Using Allow Drag and Allow Drop check boxes, you can choose how drag and drop will work for both tree views on general level.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
General Drag Drop Conditions in TreeView Component
By default, drag drop operation is not allowed. To make sure items are draggable and the target TreeView can accept them when they are dropped, you need to set the following properties to true:
- allowDrag - determines whether TreeView items are draggable (false by default)
- allowDrop - determines whether TreeView can accept items or other objects to be dropped (false by default)
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
You can change these properties when required (like it is presented in above demo), using checkboxes to change the property value.
When allowDrag is set to false, the drag drop operation is suspended and you cannot drag items. In similar way, when allowDrop is set to false, you cannot drop items. This is useful in cases when you want to limit the drag drop operation between different TreeViews.
For example, let us have the following settings:
Left TreeView: allowDrag = true, allowDrop = false
Right TreeView: allowDrag = false, allowDrop = true
This allows you to move items from left to right only, but you cannot move items within the left tree view. In addition, once items are moved to the right TreeView, you cannot move them again, because dragging is not allowed.
How to Cancel Drag and Drop
In most cases, general drag drop conditions mentioned above are not enough. To customize drag and drop operations, you can set custom fields for items or handle the dragOver event to determine whether a specific item is draggable.
On individual level, each item also has two fields: allowDrag and allowDrop. This allows you to exclude some item to be dragged or to not allow other items to drop over this item.
In addition, you can handle the dragOver event and prevent drops over root items where id value is below 4:
Currently VueJS doesn't have full support for events fired from Web Components. Although events are fired, the event handler set in VueJS template using @eventName="methodName" will not work. For this reason, you can add event handlers using standard addEventListener method, like it is presented here.
If condition is fulfilled, the cancel field of event data is set to true. This cancels further execution of drag drop operation and shows the 'no drop' icon during dragging process.
Another example, you may want to reorder items but prevent them to become children of other items. In this case, use the dropPos field of event data and if it is equal to 0, than cancel the drag drop:
Drag Drop Event Data
The event data in dragOver and dragDrop events contains information that you can use in your code to customize the drag drop operations in whole and create the best solution for your application requirements. Here is a list of event data fields:
- action - specifies whether item is moved or copied
- cancel - determines whether drag drop is cancelled
- dragObj - specifies an item(s) that is dragged
- dropPos - specifies position at which dragged item can drop
- 0 - item will drop as a child of target item
- 1 - item will drop above target item
- 2 - item will drop below target item
- -1 - item will drop at the end of item collection of target component
- event - general HTML5 drag drop event data settings
- isDropAllowed - determines whether item can drop
- mousePos - position of mouse cursor in page coordinates
- sourceCtrl - a reference to a component from which drag drop operation has started
- targetCtrl - a reference to a component over which dragged item is dropped
- targetObj - specifies the item over which dragged item is positioned or dropped
Conclusion
IntegralUI TreeView component for Angular, React and Vue has built-in advanced drag and drop functionality. You can either use existing general conditions or create your own custom drag drop operations. By adding event handlers and handling the event data, you can create the best solution for your application requirements. You can drag and drop nodes within the same TreeView or between two or more tree views.
TreeView is part of IntegralUI Web, a suite of native web components that you can use to develop applications in Angular, React, Vue or other JavaScript frameworks.