LIDOR SYSTEMS

Advanced User Interface Controls and Components

Drag Drop Items Between Two TreeViews in Angular

Created: 15 May 2017

IntegralUI TreeView comes with built-in functionality that allows you to drag drop items within the same TreeView or to other Angular 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 items from left TreeView to the right TreeView and vice versa. When item 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.

General Drag Drop Conditions

By default, drag drop operation is not allowed. To make sure items are draggable and the target TreeView can accept then 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)
@ViewChild('application', {read: ViewContainerRef}) applicationRef: ViewContainerRef;
@ViewChild('treeview') treeview: IntegralUITreeView;

// Left TreeView  settings
public data: Array;
public allowDrag: boolean = true;
public allowDrop: boolean = true;

// Right TreeView  settings
public data2: Array;
public allowDrag2: boolean = true;
public allowDrop2: boolean = true;
                        
// 
// app.template.html
//

<div #application>
    <iui-treeview [appRef]="applicationRef" [items]="data" [allowDrag]="allowDrag" [allowDrop]="allowDrop" #treeview>
        <template let-item>
            <span [ngClass]="getItemIcon(item)"></span>
            <span class="trw-dd-item-label">{{item.text}}</span>
        </template>
    </iui-treeview>
    <iui-treeview [appRef]="applicationRef" [items]="data2" [allowDrag]="allowDrag2" [allowDrop]="allowDrop2" #treeview>
        <template let-item>
            <span [ngClass]="getItemIcon(item)"></span>
            <span class="trw-dd-item-label">{{item.text}}</span>
        </template>
    </iui-treeview>
    <br style="clear:both;"/>
</div>
                            
/*
* sample-styles.css
*/ 

.iui-treeview
{
    float: left;
    margin-right: 20px;
    width: 350px;
    height: 300px;
}
                            

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 Drop Operation

In most cases, general drag drop conditions mentioned above are not enough. To further customize drag drop operations, you can set custom fields for items or handle the dragOver event to determine whether a specific item is draggable.

For example, prevent drops over root items with its id below 4. For this purpose, the handler for dargOver event looks like this:

onItemDragOver(e: any){
    if (e.dragItem && e.dragItem.id < 4)
        e.cancel = true;
}                            
<iui-treeview [appRef]="applicationRef" [items]="data" [allowDrag]="allowDrag" [allowDrop]="allowDrop" (dragOver)="onItemDragOver($event)" #treeview></iui-treeview>
                            

If the 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 drag process.

Another example, you may want only to reorder items but prevent items to become children of other items. In this case the code for dragOver event is:

onItemDragOver(e: any){
    // When dropPos equals 0, it means items is dargged over middle space of target item
    // and when dropped will become child of target item
    if (e.dropPos == 0)
        e.cancel = true;
}                            

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 has built-n advanced drag 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.

The TreeView component is part of IntegralUI Web.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.