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

# with npm
npm i @retikolo/drag-drop-content-types
# with yarn
yarn add @retikolo/drag-drop-content-types

🔧 Configuration

In your config

  1. Add this to your config/plugins.js file (create it, if it doesn't exist yet):
1
2
3
4
5
6
module.exports = {
  // ...
  'drag-drop-content-types': {
    enabled: true
  }
}
  1. Run npm run build and (re)start the app

In the app

Go to Settings -> Drag Drop Content Type -> Configuration:

  • Specify how the rank field and the corresponding title field are called in your content types. Default value are rank and title.
  • Add the specified fields to your content type. With the default values this would be title (Text (Type: Short Text)) and rank (Number (Number format: integer))
  • You will be rewared with the drag-dropable menu in the list view of all content types having the specified fields.
  • (Recommendation: Add "Default sort attribute" rank, "Default sort order" ASC and remove the rank attribute from the view using "Configure the view" button.)

In your frontend

Assuming you go with the default settings, you can make a request on the following url to get the ordered items:

1
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!

Install now

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

Last updated

13 days ago

Strapi Compatibility

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.