Advanced Drag and Drop Operations

December 15th, 2025 - 3-4 minutes read

The Drag shadow uses the same ActivityRenderer

Its activity renderer is triggered by the DragViewTransversalSystemLayer to draw on the above-view canvas. Any activity-related logic will be drawn by the renderer during dragging operations.

Activities can be created in dragging mode using the graphics ActionContext. Activities created this way follow the same behavior as standard dragged activities.

Accessing the Drag Canvas

Access the drag canvas in the drawLayer method called by DragViewTransversalSystemLayer. Like any ScheduleJS class, you can extend this class to:

Handle additional drawing operations
Add specific logic
Create a brand new TransversalSystemLayer with custom code

Resource Row Filtering During Drag and Drop

ScheduleJS lets you act on the graphics and trigger any operation in reaction to events. You can for example modify the tree rows structure, trigger system layers specific modes, adapt the grid, and play with any ScheduleJS API you like.

Scrolling to a Row After Dropping

The Angular viewport features various methods for scrolling to specific rows.
The example below demonstrates that you can scroll to a specific row based on events even if they are coming from outside of the desired Gantt context. Note that multiple options and parameters are available to fine-tune and create the perfect scrolling behaviour.

When a list is filtered during dragging but the filter is removed after dropping, users might want to see where they dropped the activity. In such case, you can trigger a scroll action in the onActivityDragFinished event callback using the ScheduleJS scrolling API methods.

Disable Dragging of Specific Activities

ScheduleJS implements the same setEditModeCallback method as FlexGanttFX. It permits to define what kind of dragging operations are permitted after running validations based on the current state of your app for candidate activity.