Strapi plugin drag-drop-content-types

Inspired by the Drag-Drop-Content-Type Strapi 4 plugin. Drag-drop feature completely rewritten to use dndkit because react-sortable-hoc is deprecated and not compatible with React 18.

🔄 Strapi 5 Compatibility

This version (2.0.0) has been updated for Strapi 5 compatibility with the following changes:

Key Updates

• Removed Redux dependency: Strapi 5 changed its internal architecture, so the Redux-based list view refresh has been replaced with a page reload mechanism that triggers when closing the sort modal after making changes
• Updated @dnd-kit: Migrated from react-sortable-hoc to @dnd-kit for drag-and-drop functionality (React 18 compatible)
• Strapi 5 Admin API: Updated to use new Strapi 5 admin hooks (useFetchClient, useNotification, useAPIErrorHandler)
• Improved UX: You can now drag and reorder multiple items in one session - the page only refreshes once when you close the modal, preserving your changes

Known Considerations

• After sorting items, the content manager list view refreshes when you close the sort modal to display the updated order
• Uses Strapi 5's new Popover component with controlled state for better stability

### Strapi 4 Compatibility If you are still using Strapi 4, you can use version 1.7.1 of this plugin, which is available on the strapi4 branch.

⏳ Installation

Install with NPM.

npm i @retikolo/drag-drop-content-types-strapi

Install with Yarn.

yarn add @retikolo/drag-drop-content-types-strapi

🔧 Configuration

In your config

1. Add the following to your config/plugins.ts file. Create the file, if it doesn't exist.

export default () => ({
  // ...
  'drag-drop-content-types': {
    enabled: true
  }
})

2. Run npm run build and restart the app using npm run develop.

In the app

1. Go to Settings → Drag Drop Content Type → Configuration.
2. Specify the Rank Field Name used for sorting or leave the default field name rank.
3. Add a Number field with Name: myRankFieldName and Number format: integer to the sortable ContentType.
4. Configure the view of your ContentType by adding Default sort attribute → rank and Default sort order → ASC to update the view after dragging.
5. If needed: grant permissions for the rank field to your roles.

Hints

• You can set a title value that will be displayed in the menu instead of the default field.
• A second field can be displayed in the menu via the subtitle setting. It can be either a string-like field or an object such as a relation, that has a title field as configured in the settings.
• You can enable webhooks to trigger something after updating the order.

In your frontend

You can make a request in the frontend to get the ordered items. In this example the ContentType is called Foo and ordered via the rank field.

http://localhost:1337/api/foo?sort=rank:asc

🤝 Contribute

Feel free to fork and make pull requests to this plugin. All input is welcome - thanks for all contributions so far!

⭐️ Support

I you like this project, please give it a star ⭐️. Maybe this will help it getting integrated to strapi's core some day 😊.