Strapi plugin logo for Drag drop content types

Drag drop content types

Order content type entries via drag and drop

thumbnail for Drag drop content types

Strapi plugin drag-drop-content-types

dragdropcrop

⏳ Installation

Install with NPM.

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

Install with Yarn.

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

🔧 Configuration

In your config

  1. Add the following to your config/plugins.js file. Create the file, if it doesn't exist.
1module.exports = {
2  // ...
3  'drag-drop-content-types': {
4    enabled: true
5  }
6}
  1. Run npm run build and restart the app using npm run develop.

In the app

  1. Go to SettingsDrag Drop Content TypeConfiguration.
  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.

1http://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 😊.

Install now

npm install @retikolo/drag-drop-content-types

STATS

42 GitHub stars848 weekly downloads

Last updated

118 days ago

Strapi Version

4.0.0 and above

Author

github profile image for Aeneas Meier
Aeneas Meier

Useful links

Create your own plugin

Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.