Articles on: Product Roadmap Pro

Drag & Drop Management

Time to read: 5 minutes

Visually manage roadmap items by dragging them between statuses and reordering.

What You'll Learn

Enabling drag & drop
Dragging items between statuses
Reordering items
Understanding permissions
Best practices for visual management

What is Drag & Drop?

Visual Management

Instead of editing items to change status:

Click and hold an item card
Drag to another status column
Drop to update status
Reorder by dragging within column

Benefits

Faster:

No opening edit screen
No save button
Instant updates

Visual:

See items moving
Kanban-style workflow
Clear status changes

Intuitive:

Natural interaction
Easy to learn
Mobile-friendly

Enabling Drag & Drop

Global Settings

Enable for all roadmaps:

Roadmap > Settings
Pro Features tab
Check ☑ Enable Drag & Drop
Click Save Settings

Drag & drop now active!

Frontend Enable

For frontend roadmaps, use management mode:

[roadmap product="main" mode="manage"]

Permissions:

Only users with edit_posts capability
Regular visitors can't drag
Editors and admins can

Backend

Drag & drop works automatically in:

Roadmap > All Items (when in board view)
Built-in functionality
No shortcode needed

Using Drag & Drop

Dragging Between Statuses

Change item status visually:

Find item in current status column
Click and hold on item card
Drag across to different status
Drop in new status column
Status updates automatically

Example:

Drag "Dark Mode" from "Planned" to "In Progress"

→ Item status changes to "In Progress"

Visual Feedback

While dragging:

Item becomes semi-transparent
Cursor changes to "move"
Drop zones highlight
Other items shift to make space

After dropping:

Smooth animation
Item settles in new position
Status updates
Page doesn't reload

Reordering Items

Change order within same status:

Click and hold item
Drag up or down within column
Drop at desired position
Order saves automatically

Use for:

Prioritizing within status
Organizing by theme
Custom sorting
Visual grouping

What Gets Updated

When you drag:

Status changes (if moving columns)
Menu order changes (position)
Last modified date updates
Database saves immediately

Via REST API:

Sends to /roadmap/v1/items/reorder
Updates item in database
Returns success/error

Permissions

Who Can Drag?

Required capability: edit_posts

Can drag:

✅ Administrators
✅ Editors
✅ Authors (if given permission)
❌ Contributors
❌ Subscribers
❌ Visitors

Frontend Permissions

With manage mode:

[roadmap product="main" mode="manage"]

Checks user capability
Shows drag handles if allowed
Hides for non-permitted users

Without manage mode:

[roadmap product="main"]

Read-only view
No dragging
Users can vote/comment only

Restricting Access

Custom permissions:

// Only allow admins
add_filter('roadmap_can_drag_items', function($can_drag, $user_id) {
    return current_user_can('administrator');
}, 10, 2);

Board Layout

Status Columns

Items organized by status:

Each column = one status
Columns in order (settings)
Items stacked vertically

Example:

[Planned] [In Progress] [Testing] [Completed]
  Item 1     Item 4        Item 7    Item 9
  Item 2     Item 5        Item 8    Item 10
  Item 3     Item 6

Column Configuration

Order statuses:

Roadmap > Settings
Configure status order
Drag statuses to reorder
Columns reflect order

Customize display:

Show/hide certain statuses
Limit items per column
Set column widths
Configure in settings

Advanced Usage

Keyboard Accessibility

For accessibility:

Tab to focus item
Space to pick up
Arrow keys to move
Space to drop
Escape to cancel

(If implemented in your version)

Touch Support

On tablets/phones:

Touch and hold item
Drag to new position
Release to drop
Same as desktop

Optimized for:

iPad/tablets
Touch screens
Mobile devices

Batch Operations

Drag multiple items:

Not directly supported, but workaround:

Drag first item
Drag second item
Continue...

Or use bulk edit for multiple status changes.

Best Practices

Organizing Board

Keep columns clean:

Don't overload one status
Balance items across columns
Archive completed items
Regular cleanup

Visual grouping:

Group related items together
Use consistent order
Prioritize at top
Less important at bottom

Workflow Management

Status progression:

Drag left to right
Planned → In Progress → Testing → Completed
Natural flow
Clear progression

Regular updates:

Daily drag items
Quick status changes
Keep board current
Reflect reality

Team Collaboration

Clear ownership:

Assign items before dragging
Communicate status changes
Update team after big moves
Document decisions

Avoid conflicts:

One person dragging at a time
Refresh before dragging many
Coordinate with team
Use comments for context

Troubleshooting

Drag Not Working

Check settings:

Drag & drop enabled?
Roadmap > Settings > Pro Features
Toggle on and save

Check permissions:

Logged in?
Have edit_posts capability?
Admin or editor role?

Check browser:

JavaScript enabled?
No console errors?
Try different browser

Check mode:

Using mode="manage"?
In board view?
Not in list/timeline view

Items Not Saving

Check connection:

Internet connected?
WordPress online?
Database accessible?

Check for errors:

Browser console (F12)
Network tab for failed requests
Server error logs

Refresh page:

Does change persist?
If not, server issue
Check REST API

Items Jumping Back

Likely causes:

No permission:

Server rejected change
Check user role
Verify capability

Plugin conflict:

Disable other plugins
Test for conflicts
Check error logs

Cache issue:

Clear browser cache
Clear WordPress cache
Disable caching temporarily

Slow Performance

Many items:

Limit items shown
Filter by status
Use pagination
Enable caching

Slow server:

Optimize database
Upgrade hosting
Enable object cache

Drag & Drop Settings

Global Toggle

Roadmap > Settings > Pro Features

Enable Drag & Drop:

☑ Enabled - Drag works
☐ Disabled - Read-only

Applies to:

Backend board view
Frontend manage mode
All roadmaps

Per-Roadmap

Enable for specific roadmap:

[roadmap product="main" mode="manage"]

Disable for specific roadmap:

[roadmap product="main" mode="view"]

Or omit mode parameter (defaults to view).

Integration with Other Features

With Analytics

Track movement:

Drag events tracked
Status changes logged
View in Recent Activity
Analyze patterns

With Timeline

Drag on timeline:

Drag to change dates (if enabled)
Visual scheduling
Date adjustments
Project planning

With Filters

Drag filtered items:

Filter by category
Drag within filtered view
Changes persist
Refresh to see all

Technical Details

How It Works

Library: Sortable.js

Lightweight drag library
Touch support
Accessibility features
Smooth animations

REST API:

Endpoint: /roadmap/v1/items/reorder
Method: POST
Data: item_id, new_status, new_position
Response: success/error

Security:

WordPress nonce verification
Capability check
Sanitized input
Secure updates

Events Triggered

JavaScript events:

roadmap:drag:start - When drag begins
roadmap:drag:end - When drag ends
roadmap:item:updated - After save

WordPress hooks:

roadmap_before_reorder - Before update
roadmap_after_reorder - After update
roadmap_status_changed - Status change

Alternatives to Drag & Drop

If drag & drop not working:

Bulk Edit:

Select items
Bulk Actions > Edit
Change status
Click Update

Quick Edit:

Hover over item
Click Quick Edit
Change status
Save

Full Edit:

Click item title
Change status
Click Update

Next Steps

Timeline View - Visual project planning
Multi-Product - Manage multiple roadmaps
Analytics Dashboard - Track changes

← Import/Export | Back to Pro Guides →

Updated on: 25/09/2025

Was this article helpful?

Thank you!