Advanced Drag and Drop use case

ScheduleJS allows you to build complex drag-and-drop interactions, including side effects. This article will discuss how to build advanced drag-and-drop operations using the framework customization APIs.

November 16th, 2022 - 4 minutes read

How to implement a basic drag-and-drop feature?

ScheduleJS supports drag-and-drop by default. The base behavior is the following:

  • Activities can be rescheduled horizontally by clicking in the middle of it
  • They can be rescheduled vertically and horizontally by holding the Shift key
  • Their start and end time can be modified by clicking respectively on their left and right borders

To edit this behavior, a set of methods is made available to the developer.

Setting the drag-and-drop operation mode

The method to edit the drag-and-drop operation mode is:

graphics.setEditModeCallback(Activity, Layout, callback)

It will let you set which drag-and-drop operation you want to use for a specific Activity and LayoutType. You can build logic based on the activity data and from the event that its callback receives.

Let’s see how we can implement this with the following example:

// Register a new edit mode callback for MyActivity in a GanttLayout
graphics.setEditModeCallback(MyActivity, GanttLayout, myEditModeCallback);

// This callback will disallow drag-and-drop if no modifier key is pressed

const myEditModeCallback = (event: EditModeCallbackParameter) => {
  if (event.getPointerEvent().shiftKey) {
    return EditModeEnum.DRAGGING;
  if (event.getPointerEvent().ctrlKey) {
    return EditModeEnum.DRAGGING_HORIZONTAL;
  return EditModeEnum.NONE;  

In this example, the myEditModeCallback function will receive an event parameter of type EditModeCallbackParameter holding the ActivityBounds (which in turn holds an ActivityRef) and the native JavaScript PointerEvent. It will trigger whenever the user hovers any activity of type MyActivity in a GanttLayout context.

The return value of this callback has to be of type EditModeEnum. The EditModeEnum holds the following drag-and-drop possibilities:

// The EditModeEnum

export declare enum EditModeEnum {
  NONE = "NONE",

For example, to disallow a drag-and-drop operation, you can build a callback that evaluates the desired context and returns the EditModeEnum.NONE value.

The following example shows a setup where the return value of this callback is EditModeEnum.DRAGGING_VERTICAL

Example of the EditModeCallback returning DRAGGING_VERTICAL

Creating a custom drag-and-drop behavior

Now that the drag-and-drop mode is set according to your needs, you might want to edit what happens when the user is dragging the Activity. To do so, ScheduleJS provides a set of methods to monitor and affect your application’s state at runtime:

  • graphics.onActivityDragStart((event: ActivityEvent) => callback) will trigger a callback whenever a drag-and-drop operation starts
  • graphics.onActivityDragOngoing((event: ActivityEvent) => callback) will trigger a callback whenever a drag-and-drop-operation is ongoing
  • graphics.onActivityDragFinished((event: ActivityEvent) => callback) will trigger a callback whenever a drag-and-drop operation is finished

The ActivityEvent holds an ActivityRef to get activity-related information,  EventType information, the old TimeInterval before the operation, and extra specific information like the old and new Row in case you are in a vertical drag-and-drop context and the old value in case of a ChartLayout.

In addition to these three, the same sort of methods exist for:

  • Horizontal drag-and-drop
  • Vertical drag-and-drop
  • Start-time modification
  • End-time modification
  • Chart value modification (including High-Low Chart)
  • Percent change in case of a CompletableActivity

The following example shows a use-case where we had to enforce activities order when using the drag-and-drop feature:

Rescheduling preserves activities order

More implementations-related articles

This article will cover a websocket implementation featuring real time data rendering using the ScheduleJS drawing engine.

This article will go through the implementation of a custom info column using an AG Grid component in place of the default one.

This article will show you how the parent-child tree Gantt architecture within the ScheduleJS Viewer was built.

This article will showcase how the main activity renderer of the ScheduleJS Viewer was built with code examples.

ScheduleJS allows you to build complex drag-and-drop interactions, including side effects. This article shows how to implement drag-and-drop.

Notification pour
0 Commentaires
Show all comments
We would love to to have your toughts on this. Please leave a comment below!x