Install with NPM.
npm i @retikolo/drag-drop-content-typesInstall with Yarn.
yarn add @retikolo/drag-drop-content-types- Add the following to your
config/plugins.jsfile. Create the file, if it doesn't exist.
module.exports = {
// ...
'drag-drop-content-types': {
enabled: true
}
}- Run
npm run buildand restart the app usingnpm run develop.
- Go to
Settings→Drag Drop Content Type→Configuration. - Specify the
Rank Field Nameused for sorting or leave the default field namerank. - Add a
Numberfield withName: myRankFieldNameandNumber format: integerto the sortable ContentType. - Configure the view of your ContentType by adding
Default sort attribute → rankandDefault sort order → ASCto update the view after dragging. - If needed: grant permissions for the
rankfield to your roles.
- You can set a
titlevalue that will be displayed in the menu instead of the default field. - A second field can be displayed in the menu via the
subtitlesetting. It can be either a string-like field or an object such as a relation, that has atitlefield as configured in the settings. - You can enable webhooks to trigger something after updating the order.
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
Feel free to fork and make pull requests to this plugin. All input is welcome - thanks for all contributions so far!
I you like this project, please give it a star ⭐️. Maybe this will help it getting integrated to strapi's core some day 😊.

