Drag and Drop

Product Roadmap overviewFree + ProGet Product Roadmap →

Reorganize roadmap items visually by dragging them between status columns on the board, instead of opening each item to change its status.

Enabling

Go to Roadmap > Settings > Advanced and turn on Enable drag and drop. It’s on by default. Turning it off makes every board read-only, in the admin board view and on the frontend.

Using it

Backend: drag and drop works automatically on Roadmap > All Items when viewing the board layout - no shortcode needed.

Frontend: add mode="manage" to the shortcode or select Manage as the block’s Mode setting:

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

Without mode="manage" (the default, view), the board is read-only - visitors can vote and comment but not drag.

Drag an item to another column to change its status. Drag within a column to reorder items there; the new position is saved as the item’s menu_order.

Permissions

Dragging requires the edit_posts capability, checked against the specific item being moved (not just a site-wide capability check) - Administrators, Editors, and Authors with edit permission on that item can drag; Contributors, Subscribers, and logged-out visitors cannot.

Restrict further with a capability check of your own:

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

How it works

Drag and drop uses the Sortable.js library on the frontend and calls:

POST /wp-json/roadmap/v1/items/reorder

Body: item_id, new_status, new_position. The endpoint only accepts a status slug that already exists - it does not create new status terms from the request.

Troubleshooting

Drag not working: confirm Enable drag and drop is on, that you’re using mode="manage" on the frontend, and that your account has edit permission on the item and the board’s post type.

Item snaps back after dropping: usually a permission or network failure - check the browser console and network tab for the REST response.