Implementing Drag Drop logo

Implementing Drag Drop

Community
ancoleman
implementing-drag-drop

Implements drag-and-drop and sortable interfaces with React/TypeScript including kanban boards, sortable lists, file uploads, and reorderable grids. Use when building interactive UIs requiring direct manipulation, spatial organization, or touch-friendly reordering.

Overview

Publisherancoleman
Repositoryai-design-components
Skill nameimplementing-drag-drop
Stars
523
Forks
73
Bundled files
18
LicenseMIT
Links
Skill sourceRepository
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 18 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by ancoleman on GitHub. Read the source before you install it.

Installation

Install the Implementing Drag Drop AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/ancoleman/ai-design-components.git /tmp/ai-design-components
mkdir -p .claude/skills
cp -r /tmp/ai-design-components/skills/implementing-drag-drop .claude/skills/implementing-drag-drop
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Implementing Drag Drop in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Implementing Drag Drop on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Implementing Drag Drop is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

Drag-and-Drop & Sortable Interfaces

Purpose

This skill helps implement drag-and-drop interactions and sortable interfaces using modern React/TypeScript libraries. It covers accessibility-first approaches, touch support, and performance optimization for creating intuitive direct manipulation UIs.

When to Use

Invoke this skill when:

  • Building Trello-style kanban boards with draggable cards between columns
  • Creating sortable lists with drag handles for priority ordering
  • Implementing file upload zones with visual drag-and-drop feedback
  • Building reorderable grids for dashboard widgets or galleries
  • Creating visual builders with node-based interfaces
  • Implementing any UI requiring spatial reorganization through direct manipulation

Core Patterns

Sortable Lists

Reference references/dnd-patterns.md for:

  • Vertical lists with drag handles
  • Horizontal lists for tab/carousel reordering
  • Grid layouts with 2D dragging
  • Auto-scrolling near edges

Kanban Boards

Reference references/kanban-implementation.md for:

  • Multi-column boards with cards
  • WIP limits and swimlanes
  • Card preview on hover
  • Column management (add/remove/collapse)

File Upload Zones

Reference references/file-dropzone.md for:

  • Visual feedback states
  • File type validation
  • Multi-file handling
  • Progress indicators

Accessibility

Reference references/accessibility-dnd.md for:

  • Keyboard navigation patterns
  • Screen reader announcements
  • Alternative UI approaches
  • ARIA attributes

Library Selection

Primary: dnd-kit

Modern, accessible, and performant drag-and-drop for React.

Reference references/library-guide.md for:

  • Library comparison (dnd-kit vs alternatives)
  • Installation and setup
  • Core concepts and API
  • Migration from react-beautiful-dnd

Key Features

  • Built-in accessibility support
  • Touch, mouse, and keyboard input
  • Zero dependencies (~10KB core)
  • Highly customizable
  • TypeScript native

Implementation Workflow

Step 1: Analyze Requirements

Determine the drag-and-drop pattern needed:

  • Simple list reordering → Sortable list pattern
  • Multi-container movement → Kanban pattern
  • File handling → Dropzone pattern
  • Complex interactions → Visual builder pattern

Step 2: Set Up Library

Install required packages:

bash
npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities

Step 3: Implement Core Functionality

Use examples as starting points:

  • examples/sortable-list.tsx for basic lists
  • examples/kanban-board.tsx for multi-column boards
  • examples/file-dropzone.tsx for file uploads
  • examples/grid-reorder.tsx for grid layouts

Step 4: Add Accessibility

Reference references/accessibility-dnd.md to:

  • Implement keyboard navigation
  • Add screen reader announcements
  • Provide alternative controls
  • Test with assistive technologies

Run scripts/validate_accessibility.js to check implementation.

Step 5: Optimize Performance

For lists with >100 items:

  • Reference references/performance-optimization.md
  • Implement virtual scrolling
  • Use scripts/calculate_drop_position.js for efficient calculations

Step 6: Style with Design Tokens

Apply theming using the design-tokens skill:

  • Reference design token variables
  • Implement drag states (hovering, dragging, dropping)
  • Add visual feedback and animations

Mobile & Touch Support

Reference references/touch-support.md for:

  • Long press to initiate drag
  • Preventing scroll during drag
  • Touch-friendly hit areas (44px minimum)
  • Gesture conflict resolution

State Management

Reference references/state-management.md for:

  • Managing drag state in React
  • Optimistic updates
  • Undo/redo functionality
  • Persisting order changes

Scripts

Calculate Drop Position

Run scripts/calculate_drop_position.js to:

  • Determine valid drop zones
  • Calculate insertion indices
  • Handle edge cases

Generate Configuration

Run scripts/generate_dnd_config.js to:

  • Create dnd-kit configuration
  • Set up sensors and modifiers
  • Configure animations

Validate Accessibility

Run scripts/validate_accessibility.js to:

  • Check keyboard navigation
  • Verify ARIA attributes
  • Test screen reader compatibility

Examples

Each example includes complete TypeScript code with accessibility:

Sortable List

examples/sortable-list.tsx

  • Vertical list with drag handles
  • Keyboard navigation (Space/Enter to grab, arrows to move)
  • Screen reader announcements

Kanban Board

examples/kanban-board.tsx

  • Multiple columns with draggable cards
  • Card movement between columns
  • Column management features
  • WIP limits

File Dropzone

examples/file-dropzone.tsx

  • Drag files to upload
  • Visual feedback states
  • File type validation
  • Upload progress

Grid Reorder

examples/grid-reorder.tsx

  • 2D grid dragging
  • Auto-layout on drop
  • Responsive breakpoints

Assets

TypeScript Types

assets/drag-state-types.ts provides:

  • Type definitions for drag state
  • Event handler types
  • Configuration interfaces

Configuration Schema

assets/dnd-config-schema.json defines:

  • Valid configuration options
  • Sensor settings
  • Animation parameters

Best Practices

Visual Feedback

  • Show drag handles (⋮⋮) to indicate draggability
  • Change cursor (grab → grabbing)
  • Display drop zone placeholders
  • Make dragged items semi-transparent
  • Highlight valid drop targets

Performance

  • Use CSS transforms, not position properties
  • Apply will-change: transform for animations
  • Throttle drag events for large lists
  • Implement virtual scrolling when needed

Accessibility First

  • Always provide keyboard alternatives
  • Include screen reader announcements
  • Test with NVDA/JAWS/VoiceOver
  • Provide non-drag alternatives (buttons/forms)

Error Handling

  • Show invalid drop feedback
  • Implement undo functionality
  • Auto-save after successful drops
  • Handle network failures gracefully

Common Pitfalls

Avoid These Issues

  • Forgetting keyboard navigation
  • Missing touch support
  • Not preventing scroll during drag
  • Ignoring accessibility
  • Poor performance with large lists

Solutions

Reference the appropriate guide for each issue:

  • Accessibility → references/accessibility-dnd.md
  • Touch → references/touch-support.md
  • Performance → references/performance-optimization.md
  • State → references/state-management.md

Testing Checklist

Before deployment, verify:

  • Keyboard navigation works completely
  • Screen readers announce all actions
  • Touch devices can drag smoothly
  • Performance acceptable with expected data volume
  • Visual feedback clear and responsive
  • Undo/redo functionality works
  • Alternative UI provided for accessibility
  • Works across all target browsers

Next Steps

After implementing basic drag-and-drop:

  1. Add advanced features (auto-scroll, multi-select)
  2. Implement gesture support for mobile
  3. Add animation polish with Framer Motion
  4. Create custom drag preview components
  5. Build complex interactions (nested dragging)

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Implementing Drag Drop AI skill do?

Implements drag-and-drop and sortable interfaces with React/TypeScript including kanban boards, sortable lists, file uploads, and reorderable grids. Use when building interactive UIs requiring direct manipulation, spatial organization, or touch-friendly reordering.

Why use Implementing Drag Drop on TypingMind?

Because you install it once and use it with any model. Implementing Drag Drop is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Implementing Drag Drop in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/ancoleman/ai-design-components/tree/main/skills/implementing-drag-drop. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Implementing Drag Drop?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Implementing Drag Drop?

As many as you like. As long as a model supports skills, you can use Implementing Drag Drop with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Implementing Drag Drop AI skill free?

Yes. It is published on GitHub by ancoleman under the MIT license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

Related AI Skills

View all
nextlevelbuilder logo

Design

nextlevelbuilder
OrganizationPopular

Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML…

13.7K
128.8K
35 files
View
nextlevelbuilder logo

Slides

nextlevelbuilder
OrganizationPopular

Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.

13.7K
128.8K
5 files
View
mattpocock logo

Improve Codebase Architecture

mattpocock
CommunityPopular

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

22.3K
264.4K
2 files
View
mattpocock logo

Grilling

mattpocock
CommunityPopular

Grill the user relentlessly about a plan, decision, or idea. Use when the user wants to stress-test their thinking, or uses any 'grill' trigger phrases.

22.3K
264.4K
1 files
View

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇