# Moving Multiple Tasks at Once (JavaScript Gantt Chart) | DayPilot Pro for JavaScript Demo

> All selected tasks can be moved together when you drag one of them. You can select multiple tasks by holding down the Ctrl key and clicking on the tasks. Read more about [task multi-moving](https://doc.daypilot.org/gantt/task-multi-moving/).

## Links

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

## Source

### Inline demo script 1

```javascript
var dp = new DayPilot.Gantt("dp");

        dp.startDate = DayPilot.Date.today().addDays(-1);
        dp.days = 60;

        // generate and load sample tasks
        var start = DayPilot.Date.today();
        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.onBeforeTaskRender = function (args) {
            // args.data.box.html = args.data.text;
        };

        dp.onRowMoving = function (args) {
            //args.position = "forbidden";
        };

        dp.onColumnResized = function (args) {
            console.log(args);
            console.log(dp.columns);
        };

        dp.contextMenuLink = new DayPilot.Menu({
            items: [
                {
                    text: "Show link ID", onClick: function (args) {
                        DayPilot.Modal.alert("Link ID: " + args.source.data.id);
                    }
                },
                {
                    text: "Delete link", onClick: function (args) {
                        dp.links.remove(args.source);
                    }
                }
            ]
        });

        dp.contextMenuTask = new DayPilot.Menu({
            items: [
                {
                    text: "Show task ID", onClick: function (args) {
                        DayPilot.Modal.alert("Task ID: " + args.source.id());
                    }
                },
                {
                    text: "Delete task", onClick: function (args) {
                        dp.tasks.remove(args.source);
                    }
                }
            ]
        });

        dp.contextMenuRow = new DayPilot.Menu({
            items: [
                {
                    text: "Show task ID", onClick: function (args) {
                        DayPilot.Modal.alert("Task ID: " + args.source.id());
                    }
                },
                {
                    text: "Delete task", onClick: function (args) {
                        dp.tasks.remove(args.source);
                    }
                }
            ]
        });

        dp.allowMultiSelect = true;
        dp.allowMultiMove = true;
        dp.taskClickHandling = "Select";

        dp.init();
```