DayPilot.Gantt.registerDropTarget

The registerDropTarget() method allows registering an external element as a drop target for JavaScript Gantt Chart rows. This will allow dragging rows from the Gantt Chart to this element.

This method is static. It has to be executed using the full prefix (not on a DayPilot.Gantt class instance).

Available since 2024.4.6270.

Declaration

DayPilot.Gantt.registerDropTarget(options);

Parameters

• options.element (DOM element) - the element to be activated for drag and drop

• options.onDragLeave - event handler that will be fired when the source event is moved outside of the target; optional

• options.onDragOver - event handler that will be fired continuously when the source event is being moved over the target; optional

• options.onDrop - event handler that will be fired on drop; optional

The event handlers will receive an args parameter with the following properties:

• args.task - source task (DayPilot.Task)

Example

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

        dp.tasks.remove(args.task);
    },
});