The Scheduler supports drag-and-drop moving of rows (resources) to and from an external list.
Available since version 2024.4.6270.
Making External Items Draggable to Scheduler as Rows
Use the DayPilot.Scheduler.makeDraggableAsRow() method to make an element draggable:
const item = {
element: document.querySelector("#item"),
data: {
id: 1,
name: "Item 1",
}
};
DayPilot.Scheduler.makeDraggableAsRow(item);The element property defines the source element that will be activated.
By default, this element will be removed from the DOM when it is dropped as a row in the Scheduler.
The data property specifies the resource data object that will be used to create the new row on drop.
Activating an Element as Drop Target
Use the DayPilot.Scheduler.registerRowDropTarget() method to activate an element as a drop target for rows dragged out of the Scheduler:
DayPilot.Scheduler.registerRowDropTarget({
element: document.getElementById("queue"),
onDrop: args => {
const parent = document.getElementById("list");
const li = document.createElement("li");
li.setAttribute("data-id", args.row.id);
li.innerText = args.row.name;
parent.appendChild(li);
dp.rows.remove(args.row);
document.getElementById("queue").style.backgroundColor = "";
},
onDragOver: args => {
document.getElementById("queue").style.backgroundColor = "#f8f8f8";
},
onDragLeave: args => {
document.getElementById("queue").style.backgroundColor = "";
}
});The element property defines the target element.
The onDrop event handler can be used to create a new list item in the target element.
You can use the onDragOver and onDragLeave events to implement hover effects.