Gantt Drag Interactions
Applies to: Pro · Enterprise (Editor Mode) Last updated: 27-Feb-2026
Overview
The Gantt chart supports three drag interactions for editing activities directly on the timeline: drag to move (reschedule), drag to progress (update completion), and drag to link (create relationships). All drag interactions require Editor Mode and produce undoable commands.
Prerequisites
- Active Pro or Enterprise subscription
- Editor Mode enabled (all drag interactions are disabled in viewer mode)
Drag to Move
Reschedule activities by dragging bars on the timeline.
Three Drag Modes
| Mode | Trigger | Behaviour |
|---|---|---|
| Move | Drag the bar body | Both start and end dates shift by the same amount; duration stays the same |
| Resize Start | Drag the left edge (6px invisible handle) | Start date changes, end date stays fixed; duration adjusts |
| Resize End | Drag the right edge (6px invisible handle) | End date changes, start date stays fixed; duration adjusts |
Resize handles appear as thin invisible zones at each edge of the bar. When you hover over them, the cursor changes to ew-resize.
Snap Behaviour
Dragged bars snap to time boundaries for precision:
| Setting | Default | Description |
|---|---|---|
| Snap Enabled | On | Bars snap to the nearest boundary |
| Snap Unit | Day | Snap to start of day, hour, or week |
| Tolerance | 8px | How close the bar must be to a boundary before snapping |
| Show Guides | On | Display snap guide lines during drag |
| Enforce Constraints | On | Respect scheduling constraints |
How snapping works: When you drag a bar within the tolerance distance of a day/hour/week boundary, it snaps to that boundary. If the bar is between two boundaries and outside both tolerance zones, it uses the exact cursor position (no snap).
Visual Feedback
During a drag operation, you see:
- Original position — a dashed blue outline showing where the bar started
- Ghost position — a solid blue outline showing the new position
- Delta label — a small label above the bar showing the direction (→ or ←) for moves, or "Start"/"End" for resizes
Bar Type Constraints
| Bar Type | Move | Resize Start | Resize End |
|---|---|---|---|
| Task Bar | Yes | Yes | Yes |
| Milestone | Yes (move only) | No | No |
| Summary Bar | No | No | No |
Milestones have no resize handles (zero-duration events). Summary bars are read-only roll-ups that cannot be edited directly.
Drag to Progress
Update an activity's percent complete by dragging the progress handle.
How It Works
- Hover over a task bar to reveal the progress handle — a thin 6px-wide indicator at the current completion edge
- Click and drag left or right to adjust the percentage
- Release to apply the new value
Constraints
- The handle only appears when percent complete is between 1% and 99% (not rendered at 0% or 100%)
- Only available on task bars (not milestones or summary bars)
- Values are clamped to the 0–100% range
Visual Feedback
During a progress drag:
- Green overlay with a green fill shows the updated progress proportion
- Percentage label — a bold green label above the bar shows the current value (e.g., "65%")
- The original progress position is visible as the translucent right edge
Drag to Link
Create dependency relationships by dragging from one bar to another.
How It Works
- Hover over any task bar to reveal connector dots — green circles at the left (start) and right (finish) edges
- Click and drag from a connector dot on the source bar
- A rubber band line follows your cursor — a dashed green line with an arrowhead
- Drag over a target bar — it highlights with a green outline
- Release over the target bar's start or finish edge to create the relationship
Relationship Type Mapping
The relationship type is determined by which edges you connect:
| Source Edge → Target Edge | Relationship |
|---|---|
| Finish → Start | FS (Finish-to-Start) |
| Start → Start | SS (Start-to-Start) |
| Finish → Finish | FF (Finish-to-Finish) |
| Start → Finish | SF (Start-to-Finish) |
Target edge detection is automatic — if you release over the left half of the target bar, it's the start edge; the right half is the finish edge.
Visual Feedback
- Source anchor — a 5px green filled circle at the drag start point
- Rubber band — a dashed green SVG line from the source to the cursor
- Arrow head — a solid green arrow at the cursor position
- Target highlight — the target bar gets a green outline and box-shadow when hovered over during the drag
Cancelling
Press Escape to cancel a link drag at any time.
Constraints
- You cannot link a bar to itself
- Connector dots appear on task bars and milestones
- Summary bars do not have connector dots
Tips & Best Practices
- Use drag to move for quick rescheduling during planning sessions
- The day snap unit works well for most projects; switch to hour-level snap for detailed intra-day scheduling
- Use drag to link as a faster alternative to the Relationship Editor for ad-hoc links
- Remember that all drag operations create undoable commands — press Ctrl+Z if you make a mistake
- Check the Gantt Overview for bar style and display settings
Related Documentation
- Gantt Overview — Bar styles, navigation, and display
- Gantt Settings — Customise bar styles, chart options, and timescale
- Relationship Editor — Dialog-based relationship creation
- Undo & Redo — Reverse any drag operation