In this blog we will discuss the Drag and drop functionality of our Angular Tree.

The Tree component enables the presentation of hierarchical information. It consists of a root item and children of the root item. Each item excluding the root has a parent and can have children. The items on the same level under one parent are called siblings. Each item can be expanded or collapsed and can have a text and an image.

The Drag and Drop functionality represents the capability to move items between different components. An item can be grabbed from the source component by clicking the mouse over it dragged with the mouse to the container component and dropped. This presents a convenient way to move items back and forth between the components.

Angular Tree with Drag and Drop Features

One of the important features is that you can drag and drop items who have also an image.



The above screenshot was taken from our online demo using jqxTree with Angular 6 framework.

The Drag and Drop functionality generates drag start and drag end events for each item.

I addition to that you can also disable or enable elements from being dragged and dropped.

The tree enable also keyboard navigation and right-to-left layout.

You can see an example here.

The post Angular Tree Drag and Drop appeared first on Javascript, HTML5, jQuery Widgets.