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 is called in your content-types. Default value is rank.
  • Add the rank fields to your content type. With the default value this would be rank (Number (Number format: integer)).
  • (Give permissions for the rank field to roles such as "Editor" if needed).

Hints

  • Add "Default sort attribute" rank, "Default sort order" ASC and remove the rank attribute from the view using "Configure the view" button.
  • You can also set a title value that is displayed in the menu instead of the default.
  • If you want a second field to be displayed in the drag and drop menu, you can add s subtitle in the settings. The subtitle should either be:
  • A field containing a string or number or something like that.
  • It can be an object (like a relation), but it must have the title field specified in the settings (it won't recognize automatically!).

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

🐞 Known issues

Due to changes in the Strapi core, the plugin causes a full page reload after sorting. This is a known issue, and will be fixed ASAP if possible.

🤝 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

35 GitHub stars2178 weekly downloads

Last updated

112 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.