Drag & Drop Management

Get Started

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:

  1. Roadmap > Settings
  2. Pro Features tab
  3. Check ☑ Enable Drag & Drop
  4. Click Save Settings
Settings page with Pro feature toggles visible in the sidebar

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:

  1. Find item in current status column
  2. Click and hold on item card
  3. Drag across to different status
  4. Drop in new status column
  5. 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:

  1. Click and hold item
  2. Drag up or down within column
  3. Drop at desired position
  4. 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

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:

  1. Roadmap > Settings
  2. Configure status order
  3. Drag statuses to reorder
  4. 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:

  1. Drag first item
  2. Drag second item
  3. 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

Alternatives to Drag & Drop

If drag & drop not working:

Bulk Edit:

  1. Select items
  2. Bulk Actions > Edit
  3. Change status
  4. Click Update

Quick Edit:

  1. Hover over item
  2. Click Quick Edit
  3. Change status
  4. Save

Full Edit:

  1. Click item title
  2. Change status
  3. Click Update

Next Steps

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

← Timeline View | Import & Export →

Last updated: March 4, 2026