Drag and Drop

Drag and drop is a core interaction in ProBeya. It works across Board, Table, Timeline, and Calendar views, letting you visually reorganize your work.

Board View

Moving Items Between Groups

1. Click and hold an item card.
2. Drag it to a different group column.
3. Release to drop it. The item's grouping field (usually Status) is automatically updated to match the target group.

The drag operation triggers a trpc.items.move mutation that updates both the item's groupId and sortOrder in the database.

Reordering Within a Group

Drag an item card up or down within the same column to change its position. The new sort order is persisted to the database and visible to all team members in real time.

Reordering Groups

Drag a group header (the column title) left or right to change the order of groups on the board. This updates the sortOrder of all affected groups.

Mobile Accordion

On mobile devices, the board view switches to a vertical accordion layout. In this mode, drag-and-drop is replaced by a Move to action: tap the item card, then select the target group from a dropdown menu.

Table View

Moving Rows Between Groups

Drag the row handle (the grip icon on the far left of each row) to move an item to a different group section. The item's group field is updated automatically.

Reordering Rows

Drag rows up or down within a group to change their sort order. Note that manual reordering is disabled when a sort rule is active — the sort button in the top bar shows an active indicator when a sort is applied.

Reordering Columns

Drag column headers left or right to rearrange the visible fields. Column order is persisted per user and view.

Timeline View

• Drag a bar horizontally to shift the start and end dates by the same amount. Both dates update proportionally.
• Drag the left edge of a bar to change the start date while keeping the end date fixed.
• Drag the right edge of a bar to change the end date while keeping the start date fixed.

All date changes from timeline drag operations are saved immediately via the trpc.items.setValue mutation.

Calendar View

• Drag an item pill from one date cell to another to reschedule it. The item's date field value updates to the target date.
• Drag the edge of a multi-day item to extend or shorten its duration.

Dashboard Widgets

The dashboard uses react-grid-layout for widget arrangement:

• Drag widgets by their title bar to reposition them on the grid.
• Resize widgets by pulling their resize handles (visible in edit mode).
• Toggle edit mode with the lock/unlock icon in the dashboard toolbar.
• Layouts are saved automatically after a 500ms debounce.

Multi-Select Drag

1. Select multiple items using checkboxes or Shift+Click.
2. Drag any of the selected items.
3. All selected items move together to the target location.

This works in both Board and Table views.

Real-Time Sync

All drag-and-drop operations are synchronized in real time via WebSocket. If another team member is viewing the same board, they will see items move as you drag them. The sync uses Redis pub/sub for cross-server broadcast.

Visual View Canvas

The Visual view has its own drag interactions for widgets on the freeform canvas:

• Drag widgets to reposition them on the infinite canvas.
• Resize widgets by pulling edge and corner handles. Minimum dimensions are enforced per widget type.
• Snap-to-grid — when enabled, widgets align to an invisible grid as you drag or resize them.

Accessibility

For users who prefer keyboard navigation, all drag-and-drop operations have keyboard equivalents:

1. Select an item with Space.
2. Use arrow keys to move it (up/down for reorder, left/right for group change).
3. Press Space again to drop it in the new position.

Canceling a drag

Press Escape during a drag operation to cancel it and return the item to its original position.

Troubleshooting

Problem	Solution
Cannot drag items	Verify you have Member or Admin permissions. Viewers have read-only access.
Manual reorder disabled	A sort rule is active. Remove the sort to enable manual reordering.
Drag not working on mobile	The board uses an accordion layout on mobile. Use the Move to action instead.
Dashboard widgets locked	Click the unlock icon in the dashboard toolbar to enable edit mode.

Drag Feedback

During a drag operation, ProBeya provides visual feedback:

• The dragged item shows a semi-transparent ghost at the cursor position.
• The drop target highlights with a colored indicator to show where the item will land.
• Invalid drop zones (e.g., dragging into a read-only area) do not highlight.
• On drop, the item animates to its new position with a smooth CSS transition.

Best Practices

• Use snap-to-grid in the Visual view for professional-looking layouts.
• Disable sorts before manual reordering in Table view to avoid confusion.
• Use multi-select drag for batch operations — select all items to move, then drag once.
• Test on touch devices — drag interactions are optimized for both mouse and touch input.

Next Steps

• Board View — Kanban board with drag-and-drop columns.
• Table View — spreadsheet with drag-and-drop rows and columns.
• Visual View — freeform canvas with draggable widgets.