Breadcrumb arrow Back to Code Examples

Drag And Drop Items From External Sources To The Vue Gantt Chart

Sample date Updated on Sep 13, 2025
Browse Code Git logo Download
gantt gantt-chart tree-view tree-view-drag-and-drop vue-gantt-chart vue-gantt-chart-drag-and-drop vue-task-management vue-tree-view vue-tree-view-drag-and-drop

A quick start project that allows you to drag and drop an item from an external TreeView component to the Vue Gantt Chart row. In this video, the dragged item is updated as a resource to the appropriate Gantt Chart task using the nodeDragStop event of the TreeView component.

Refer to the drag and drop documentation for the Syncfusion Vue Gantt Chart component: https://helpej2.syncfusion.com/vue/documentation/gantt/how-to/drag-and-drop-from-another

Refer to the documentation for the feature modules in the Syncfusion Vue Gantt Chart component: https://ej2.syncfusion.com/vue/documentation/gantt/module

Refer to the Syncfusion Vue Gantt Chart Getting Started video: https://www.youtube.com/watch?v=S1GbWmVcre0

Refer to the Syncfusion Vue Gantt Chart Resource Allocation and Task Breakdown video: https://www.youtube.com/watch?v=JkvpRwaabQM

Refer to the Syncfusion Vue Gantt Chart editing video: https://www.youtube.com/watch?v=AmwIxCtejPo

Project prerequisites

Make sure that you have the latest versions of Vue, Node, Vue Class Component, and Visual Studio Code in your machine before starting to work on this project.

How to run this application?

To run this application, you need to clone the drag-and-drop-items-from-external-sources-to-the-vue-gantt-chart repository and then open it in Visual Studio Code. Now, simply install all the necessary react packages into your current project using the npm install command and run your project using the npm run serve command.

Up arrow