# Task Moving between Gantt Charts | DayPilot Pro for JavaScript Demo

> You can drag tasks (rows) between two Gantt Chart components. Read more about [row moving between Gantt Charts](https://doc.daypilot.org/gantt/row-moving-between-gantt-charts/).

## Links

- Canonical HTML: /demo/gantt/taskmovingtwoganttcharts.html
- Source HTML folder: /demo/gantt/
- Catalog root: /demo/
- Catalog: /demo/llms.txt

## Source

### Inline demo script 1

```javascript
function init(id) {
            var dp = new DayPilot.Gantt(id);

            dp.days = 30;

            // generate and load sample tasks
            var start = new DayPilot.Date().getDatePart();
            var last = null;
            for (var i = 0; i < 5; i++) {
                var duration = Math.floor(Math.random() * 3) + 1; // 1 to 3
                var end = start.addDays(duration);

                var e = new DayPilot.Task({
                    start: start,
                    end: end,
                    id: DayPilot.guid(),
                    text: "Task " + i,
                    tags: {
                        info: "info text"
                    },
                    children: [
                        {
                            start: start,
                            end: end,
                            id: DayPilot.guid(),
                            text: "Subtask 1",
                            complete: Math.floor(Math.random() * 101) // 0 to 100
                        },
                        {
                            start: start,
                            end: end,
                            id: DayPilot.guid(),
                            text: "Subtask 2",
                            complete: Math.floor(Math.random() * 101) // 0 to 100
                        },
                        {
                            start: end,
                            id: DayPilot.guid(),
                            text: "Milestone 1",
                            type: "Milestone"
                        }

                    ]
                });

                dp.tasks.add(e);

                if (last) {
                    dp.links.add(new DayPilot.Link({
                        id: DayPilot.guid(),  // optional
                        from: last,
                        to: e.id(),
                        type: "FinishToStart"
                    }));
                }
                last = e.id();
                start = end;

            }

            dp.columns = [
                {
                    title: "Name",
                    width: 50,
                    property: "text"
                },
                {
                    title: "Info",
                    width: 50,
                    property: "info"
                },
                {
                    title: "Duration",
                    width: 50
                }
            ];

            dp.onBeforeRowHeaderRender = function (args) {
                var duration = args.task.duration();
                var html = duration.toString("d") + "d " + duration.toString("h") + "h";
                args.row.columns[2].html = html;
            };

            dp.onRowMoved = function (args) {
                console.log("onRowMoved", args);
            };

            dp.init();

            return dp;
        }

        var dp1 = init("dp1");
        var dp2 = init("dp2");
```