بنقرة واحدة
drag-and-drop
Use when implementing allow users to reorder items intuitively.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
القائمة
Use when implementing allow users to reorder items intuitively.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Use when implementing help users understand their current location.
Use when implementing expand and collapse content sections.
Use when implementing user account configuration and preferences.
Use when implementing social activity and updates stream.
Use when implementing conversational AI chat interfaces.
Use when implementing handling AI-specific errors.
| name | drag-and-drop |
| description | Use when implementing allow users to reorder items intuitively. |
| metadata | {"id":"drag-and-drop","category":"content-management","pattern":"Drag and Drop","source":"uxpatterns.dev","url":"https://uxpatterns.dev/patterns/content-management/drag-and-drop","sourcePath":"apps/web/content/patterns/content-management/drag-and-drop.mdx"} |
Allow users to reorder items intuitively
A Drag and Drop pattern helps teams create a reliable way to let users move or reorder items spatially while preserving clear feedback, keyboard alternatives, and safe recovery. It is most useful when teams need sortable lists and priorities. Compared with adjacent patterns, this pattern should reduce friction without hiding the state, rules, or recovery paths people need to keep moving.
references/pattern.md, then choose the smallest viable variation.aria-describedby or structural headings when useful.The Problem: The pattern feels polished until loading, empty, and failure states appear.
How to Fix It? Specify the full lifecycle alongside the default state so implementation does not improvise later.
The Problem: Users work harder when controls, status, and supporting information feel disconnected.
How to Fix It? Keep the information architecture of the pattern close to the interaction model.
The Problem: Keyboard, announcement, and reading-order issues become expensive once the interaction is already fixed.
How to Fix It? Bake semantics, focus behavior, and announcements into the first implementation.
For full implementation detail, examples, and testing notes, see references/pattern.md.
Pattern page: https://uxpatterns.dev/patterns/content-management/drag-and-drop