External Drag and Drop of Gantt Chart Tasks

The JavaScript Gantt Chart component supports dragging tasks to and from and external source (list, table, etc.).

Available since 2024.4.6270.

Dragging Items from an External Source to the Gantt Chart

To make custom DOM elements draggable to the Gantt Chart as rows (representing tasks), use the static DayPilot.Gantt.makeDraggable() method:

const item = {
    element: document.querySelector("#item"),
    data: {
        id: 1,
        text: "Task 1",
        duration: DayPilot.Duration.hours(5),
        box: {
            barColor: "#a12424",
            barBackColor: "#b88888",
        }
    }
};
DayPilot.Gantt.makeDraggable(item);

Use the options parameter of the makeDraggable() method to specify the draggable element (element property). The object that will be used as the data source for the task must be specified using the data property.

Dragging Tasks from the Gantt Chart to an External Target

It is also possible to drag the tasks from the Gantt Chart to a custom element.

To register an element as a drop target, use the DayPilot.Gantt.registerDropTarget() method:

DayPilot.Gantt.registerDropTarget({
    element: document.getElementById("queue"),
    onDrop: args => {
        const parent = document.getElementById("external");
        const li = document.createElement("li");
        li.setAttribute("data-duration", args.task.duration().totalHours());
        li.setAttribute("data-id", args.task.id());
        li.style.cursor = "move";
        li.innerText = args.task.text();
        parent.appendChild(li);

        app.makeDraggable();

        dp.tasks.remove(args.task);
        document.getElementById("queue").style.backgroundColor = "";
    },
    onDragOver: args => {
        document.getElementById("queue").style.backgroundColor = "#f8f8f8";
    },
    onDragLeave: args => {
        document.getElementById("queue").style.backgroundColor = "";
    }
});

The options parameter of the registerDropTarget() method can be used to specify the target and drag behavior:

  • the target element (element property)

  • drag event handlers (such as onDrop, onDragOver, onDragLeave)

Demo