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.

TreeView component is part of IntegralUI Web
a suite of UI Components for development of web apps

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.

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 (true 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:

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
  • dragItem - 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
  • targetItem - specifies the item over which dragged item is positioned or dropped

Conclusion

IntegralUI TreeView component for Angular, React and Vue has built-n 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.

The TreeView is a native Web Component, part of IntegralUI Web.