DayPilot.Scheduler.registerRowDropTarget

The registerRowDropTarget() method registers an external element as a drop target for rows dragged out of the JavaScript Scheduler. It lets you drag rows from the Scheduler to that element.

This is a static method. Call it using the full prefix, not on a DayPilot.Scheduler instance.

Available since 2024.4.6270.

Declaration

DayPilot.Scheduler.registerRowDropTarget(options)

Parameters

• options.element (DOM element) - DOM node activated as the external drop target

• options.onDragLeave - event handler fired when the dragged row leaves the target; optional

• options.onDragOver - event handler fired continuously while the dragged row is over the target; optional

• options.onDrop - event handler fired when the dragged row is dropped on the target; optional

The event handlers receive an args object with the following property:

• args.row (DayPilot.Row) - source row being dragged

Example

DayPilot.Scheduler.registerRowDropTarget({
  element: document.getElementById("queue"),
  onDrop: (args) => {
    const parent = document.getElementById("external");
    const li = document.createElement("li");
    li.setAttribute("data-id", args.row.id);
    li.style.cursor = "move";
    li.innerText = args.row.name;
    parent.appendChild(li);

    dp.rows.remove(args.row);
  },
});

See Also

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

DayPilot.Row Class

DayPilot.Scheduler Class