@yunusemrejs/drag-drop-content-types-strapi5

Strapi Drag Drop Content Types Plugin

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

✨ Features

• 🚀 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

Installation

# Using npm
npm install @yunusemrejs/drag-drop-content-types-strapi5

# Using yarn
yarn add @yunusemrejs/drag-drop-content-types-strapi5

# Using pnpm
pnpm add @yunusemrejs/drag-drop-content-types-strapi5

⚙️ Configuration

Step 1: Enable the Plugin

Create or modify your config/plugins.ts file:

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

Step 2: Build and Restart

npm run build
npm run develop

🛠️ Setup Guide

Content Type Configuration

• Navigate to Settings → Drag Drop Content Type → Configuration
• 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

  {
    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

REST API

Fetch ordered content:

# Basic sorting
GET /api/{content-type}?sort=rank:asc

# With pagination
GET /api/{content-type}?sort=rank:asc&pagination[page]=1&pagination[pageSize]=25

# With relations
GET /api/{content-type}?sort=rank:asc&populate=*

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