JavaScript Scheduler: Events as Drag and Drop Target | DayPilot Code
source link: https://code.daypilot.org/12371/javascript-scheduler-events-as-drag-and-drop-target
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Features
Drag custom items from an external list to JavaScript Scheduler events (each event is an active HTML5 drop target)
Built using standard HTML5 drag and drop API
Each event can hold multiple external items
Items are removed from the source list after drop
Includes a trial version of DayPilot Pro for JavaScript (see License below)
License
Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript. Buy a license.
Live Demo
Dragging Items to Scheduler Events
The JavaScript Scheduler includes built-in support for dragging external items to the Scheduler. These items will be transformed into events and you can use this feature to schedule tasks from a list using drag and drop.
It is also possible to drag items from an external list to existing Scheduler events. This tutorial will show how to implement it using standard HTML5 drag and drop API.
Making External Items Draggable
Let's have a list of items that we want to drag to the Scheduler events. We will use simple <div> elements with some additional data saved using data attributes (data-id, data-name):
HTML:
<div class="draggable" data-id="1" data-name="Item 1">Item 1</div> <div class="draggable" data-id="2" data-name="Item 2">Item 2</div>
We will add some CSS to style the events:
.draggable {
border: 1px solid gray;
background-color: white;
display: inline-block;
width: 50px;
height: 50px;
cursor: move;
}Now we need to activate the items to make them draggable. This requires the draggable HTML attribute to be added:
item.setAttribute("draggable", "true");We will also handle the dragstart event and use it to specify the object type (we are using a custom data type to prevent other targets on the page from accepting the items) and pass the source object data to the target using event.dataTransfer property:
item.addEventListener("dragstart", (ev) => {
const data = {
id: item.dataset.id,
name: item.dataset.name
};
ev.dataTransfer.setData("daypilot/external-item", JSON.stringify(data));
});We will use the dragend event to remove the item from the source list if it was dropped successfully:
item.addEventListener("dragend", (ev) => {
if (ev.dataTransfer.dropEffect === "move") {
item.parentElement.removeChild(item);
}
});This is how the full source item initialization code looks like now:
function activateItems() {
const src = document.getElementsByClassName("draggable");
for (let item of src) {
item.setAttribute("draggable", "true");
item.addEventListener("dragstart", (ev) => {
const data = {
id: item.dataset.id,
name: item.dataset.name
};
ev.dataTransfer.setData("daypilot/external-item", JSON.stringify(data));
});
item.addEventListener("dragend", (ev) => {
if (ev.dataTransfer.dropEffect === "move") {
item.parentElement.removeChild(item);
}
});
}
}Scheduler Events as Drop Target
In this step, we will activate the Scheduler events as drop targets.
That can be done using dragover and drop HTML5 events. We will set the event handlers using onAfterEventRender event which provides access to the event <div> element:
dp.onAfterEventRender = (args) => {
args.div.addEventListener("dragover", (ev) => {
const hasMyType = ev.dataTransfer.types.some(function(type) { return type === "daypilot/external-item"; });
if (hasMyType) {
ev.preventDefault();
ev.dataTransfer.dropEffect = "move";
}
args.div.classList.add("dragging-over");
});
args.div.addEventListener("dragleave", (ev) => {
args.div.classList.remove("dragging-over");
});
args.div.addEventListener("drop", (ev) => {
if (!args.e.data.items) {
args.e.data.items = [];
}
const data = JSON.parse(ev.dataTransfer.getData("daypilot/external-item"));
args.e.data.items.push(data);
dp.events.update(args.e);
});
};Displaying items inside events:
dp.onBeforeEventRender = (args) => {
if (args.data.items) {
args.data.html = args.data.items.map(function(item) { return item.name; }).join(", ");
}
else {
args.data.html = "(empty)";
}
};Hover CSS Styling :
.dragging-over {
outline: 2px solid red;
}
Recommend
-
22
OverviewUse DayPilot.Scheduler.makeDraggable() to activate external DOM elements.DraggableItem React component embeds the activation logic and lets you create the draggable items tran...
-
8
FeaturesJavaScript Scheduler with client-side undo/redo functionalityThe universal UndoService stores history of all changes and provides undo() and redo() functions
-
14
How to disable custom date/time range in each row of the JavaScript Scheduler component.
-
72
How to define your own Scheduler event types and customize the appearance. You can change the event type using a context menu or a modal dialog.
-
32
OverviewThe JavaScript Scheduler component allows operations on multiple events.Copy events from multiple Scheduler rows using Ctrl+drag...
-
35
Add an icon to the JavaScript Scheduler row headers that will let users scroll to the next free slot in the row.
-
8
FeaturesZoom using HTML5 slider controlZoom using buttons: [+] and [-]Custom zoom levels with defined properties (scale, visible days, time headers...)Includes a trial version o...
-
16
FeaturesJavaScript Scheduler component that displays timeline on the horizontal axis and resources on the vertical axisYou can use customization event h...
-
36
OverviewThe tasks queue Angular component lets you display a list of unscheduled tasks.You can change the task priority using drag and drop (you can move the task to a different position in the queue).
-
6
OverviewExtend the Vue Scheduler component with unlimited undo/redo functionality.The Undo and Redo buttons are only enabled if the action is allowed.
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK