Drag and drop facilities are used in ScheduleJS to move an activity on the same row or from one row to another. All other editing operations are handled with standard mouse events (pressed, dragged). The default way to initiate a drag and drop operation is to move the mouse cursor into the center of an activity while pressing the SHIFT or ALT or CMD/CTRL key. See also 3.3.4 Activity Editing. The drag and drop will terminate once the user releases the mouse button.


Just like all the other editing operations drag and drop will also trigger several events during its execution. The following table lists them:

Event TypeDescription
These event types are fired if the editing operation is EditModeEnum.DRAGGING
These event types are fired if the editing operation is EditModeEnum.DRAGGING_VERTICAL

The edit mode DRAGGING_HORIZONTAL does not use native browser drag and drop. Hence the event types HORIZONTAL_DRAG_STARTED / ONGOING / FINISHED don't use Drag and Drop functionalities.

Drag And Drop Info Property

A special method graphics.getDragAndDropInfo() is available on graphics to monitor the drag and drop operation. This is in addition to the standard event types mentioned above. The info stored in this property provides the application with the most important information required about the dragged activity.

info.getActivityBounds(): ActivityBounds
The bounds of the dragged activity (contains an ActivityReference and the actual activity).
info.getActivityRef(): ActivityRef
The ActivityReference for the current Activity.
info.getOffset(): { x: number, y: number }
Gives x and y offset of the location you clicked on the activity from the upper left corner of the activity.
info.getPointerEvent(): PointerEvent
The pointer event for the actual event.
info.getRow(): Row
The Row of the Activity.
info.getTimeInterval(): TimeInterval
Start and End time for the current Activity.

Drop Layer Provider

Drag and drop operations can be performed between two different Layers. By default a dropped activity will be placed on the same Model Layer as the one where is was dragged from. But if the target Gantt chart does not contain that Model Layer then the application needs to be told which Model Layer to use as the new home for the activity. This can be accomplished by using graphics.setDropLayerProviderCallback(info => targetLayer).

Drop Layer Provider
const graphics = this.gantt.getGraphics();
graphics.setDropLayerProviderCallback(info => targetLayer); // Switch the Model Layer to targetLayer, info is of type DragAndDropInfo.  

The default implementation of this callback looks like this:

Default Drop Layer Provider
const callback = (info) => info.getActivityRef().getLayer(); // Don't change the Model Layer.

If the drop layer provider returns no layer or if the returned layer is not a layer that was added to the target Gantt chart / graphics then we will see messages like this.

  • "The drop layer provider has returned no layer for the dropped Activity"
  • "The drop layer provider has returned a layer that does not exist in the Gantt chart"