MoonUI

Draggable List

PRO

Advanced draggable list component with smooth animations, keyboard-accessible reordering, nested lists, and customizable drag handles. Perfect for creating sortable interfaces, kanban boards, and priority lists.

Pro Features

Unlock advanced capabilities with the Pro version

Custom Drag Handles

Flexible drag handle positioning and custom styling

Nested Lists

Support for nested draggable lists with independent sorting

Smooth Animations

Physics-based animations for natural drag interactions

Strict Handle Mode

Restrict dragging to the handle only, so interactive content inside an item stays clickable

Keyboard Reordering

Pick up, move and drop items with the keyboard, with live-region announcements

Customizable Styles

Complete control over drag states and visual feedback

Installation

Install via CLI

npx @moontra/moonui-cli add draggable-list

Usage

Pro Required
Press Space or Enter to pick up the item, use the arrow keys to move it, press Space or Enter to drop it, and press Escape to cancel.Grabbed. Use the arrow keys to move the item, press Space or Enter to drop it, and press Escape to cancel.

First Item

This is the first item

#1

Second Item

This is the second item

#2

Third Item

This is the third item

#3

Fourth Item

This is the fourth item

#4

Examples

Basic Draggable List

PRO

Simple reorderable list with smooth animations

Pro Required
Press Space or Enter to pick up the item, use the arrow keys to move it, press Space or Enter to drop it, and press Escape to cancel.Grabbed. Use the arrow keys to move the item, press Space or Enter to drop it, and press Escape to cancel.

First Item

This is the first item

#1

Second Item

This is the second item

#2

Third Item

This is the third item

#3

Fourth Item

This is the fourth item

#4

Task Management Board

PRO

Complex task list with priority, assignees, and due dates

Pro Required
Press Space or Enter to pick up the item, use the arrow keys to move it, press Space or Enter to drop it, and press Escape to cancel.Grabbed. Use the arrow keys to move the item, press Space or Enter to drop it, and press Escape to cancel.

Project Planning

Plan out the project roadmap and milestones

HighJohn Doe
2024-01-15

Design Review

Review UI/UX designs with stakeholders

MediumJane Smith
2024-01-18

Team Sync

Weekly team synchronization meeting

LowTeam
2024-01-20

Deploy to Production

Deploy the latest features to production

HighDevOps Team
2024-01-22

Custom Drag Handle & Actions

PRO

List with custom drag handle position and interactive elements

Pro Required
Press Space or Enter to pick up the item, use the arrow keys to move it, press Space or Enter to drop it, and press Escape to cancel.Grabbed. Use the arrow keys to move the item, press Space or Enter to drop it, and press Escape to cancel.

Important Task

Regular Task

Low Priority

Urgent Task

Kanban Board

PRO

Multiple draggable lists for kanban-style boards

Pro Required

To Do
2

Press Space or Enter to pick up the item, use the arrow keys to move it, press Space or Enter to drop it, and press Escape to cancel.Grabbed. Use the arrow keys to move the item, press Space or Enter to drop it, and press Escape to cancel.

Research user requirements

Research

Create wireframes

Design

In Progress
2

Press Space or Enter to pick up the item, use the arrow keys to move it, press Space or Enter to drop it, and press Escape to cancel.Grabbed. Use the arrow keys to move the item, press Space or Enter to drop it, and press Escape to cancel.

Implement authentication

Development

Design system setup

Design

Done
2

Press Space or Enter to pick up the item, use the arrow keys to move it, press Space or Enter to drop it, and press Escape to cancel.Grabbed. Use the arrow keys to move the item, press Space or Enter to drop it, and press Escape to cancel.

Project kickoff

Meeting

Database schema

Development

Nested Lists

PRO

Draggable lists with nested draggable items. The outer list uses strictDragHandle so dragging a child never starts a parent drag.

Pro Required
Press Space or Enter to pick up the item, use the arrow keys to move it, press Space or Enter to drop it, and press Escape to cancel.Grabbed. Use the arrow keys to move the item, press Space or Enter to drop it, and press Escape to cancel.

Frontend

Press Space or Enter to pick up the item, use the arrow keys to move it, press Space or Enter to drop it, and press Escape to cancel.Grabbed. Use the arrow keys to move the item, press Space or Enter to drop it, and press Escape to cancel.
React.js
Vue.js
Angular

Backend

Press Space or Enter to pick up the item, use the arrow keys to move it, press Space or Enter to drop it, and press Escape to cancel.Grabbed. Use the arrow keys to move the item, press Space or Enter to drop it, and press Escape to cancel.
Node.js
Python
Java

Database

Press Space or Enter to pick up the item, use the arrow keys to move it, press Space or Enter to drop it, and press Escape to cancel.Grabbed. Use the arrow keys to move the item, press Space or Enter to drop it, and press Escape to cancel.
PostgreSQL
MongoDB
Redis