Strapi Drag Drop Content Types Plugin

A powerful and intuitive drag-and-drop sorting solution for Strapi v5 content types


✨ Features

!dragdropcrop

- 🚀 Built for Strapi v5 with TypeScript support
- ⚡️ High-performance drag-and-drop using dnd-kit
- 📱 Responsive design for both desktop and mobile
- 🎨 Smooth animations and visual feedback
- 🔒 Built-in permission system integration
- 🌐 Internationalization support
- 🔄 Real-time content order updates
- 📦 Easy installation and configuration

Originally inspired by the Drag-Drop-Content-Type Strapi 4 plugin, this plugin has been completely rewritten using the modern dnd-kit library to ensure compatibility with React 18 and provide better performance.

🚀 Quick Start

$3

``bash


Using npm

Create or modify your config/plugins.ts file:

`typescript
export default () => ({
'drag-drop-content-types-strapi5': {
enabled: true,
},
});
`

$3

`bash
npm run build
npm run develop
`

🛠️ Setup Guide

$3

1. Navigate to Settings → Drag Drop Content Type → Configuration
2. Configure the following settings:

#### Basic Setup

- Set the Rank Field Name (default: rank)
- Add an integer field to your Content Type with the specified rank field name
- Set default sorting in Content Type settings:
- Default sort attribute: Your rank field
- Default sort order: ASC

#### Advanced Options

- Display Settings

`typescript
{
title: 'name', // Field to use as title
subtitle: 'description', // Optional: Field to show as subtitle
mainField: 'title' // Optional: Fallback field
}
`

- Webhook Integration
Enable webhooks to trigger external systems when order changes

#### Permissions

Grant appropriate permissions in Settings → Users & Permissions → Roles:

- Read permission for content type
- Update permission for the rank field

📡 API Usage

$3

Fetch ordered content:

`bash


Basic sorting

`graphql
query {
contentType(sort: "rank:asc") {
data {
id
attributes {
title
rank
}
}
}
}
``

💪 Support

- Star ⭐️ the project
- Submit issues
- Share with your network
- Consider sponsoring

📄 License

MIT © Yunus Emre Kara