DayPilot.Gantt.registerDropTarget

The registerDropTarget() method registers an external element as a drop target for JavaScript Gantt Chart rows. This makes it possible to drag rows from the Gantt Chart to that element.

This method is static. Execute it 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) - DOM node to activate for drag and drop

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

• options.onDragOver - event handler fired continuously while the source task is being moved over the target; optional

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

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

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

Notes

Use args.task in the event handlers to inspect or remove the dragged task after it is dropped on the external target.

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);
  }
});

See Also

DayPilot.Task Class

External Drag and Drop of Tasks [doc.daypilot.org]

DayPilot.Gantt Class