---
title: "Draggable List — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Duopixel Studio · Interactive. Overview Draggable List lets you create beautiful, interactive lists where users can drag items to reorder them."
canonical: "https://framer.elliotli.dev/component/draggable-list"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Draggable List

# Draggable List

[View on Framer](https://framer.com/marketplace/components/draggable-list/?via=elliot-li)

![Draggable List preview image 1](https://framer.elliotli.dev/og/component/draggable-list/72784bb81d0d2f52/1600x1200.jpg)

## Summary

Overview Draggable List lets you create beautiful, interactive lists where users can drag items to reorder them.

## Description

### Overview

Draggable List lets you create beautiful, interactive lists where users can drag items to reorder them. Simply connect any Framer components as list items and the component handles all the drag logic, animations, and reordering automatically.

### Features

**Drag to Reorder** Users can grab any item and drag it to a new position. Other items smoothly animate out of the way, creating a polished, native-feeling interaction.

**Dynamic Rotation** Items tilt naturally based on where users grab them—grab the left side and it tilts left, grab the right side and it tilts right. This subtle detail adds a tactile, realistic feel to the interaction.

**Fully Responsive** The component automatically adapts to any screen size. Items respect their container width, so your list looks great on desktop, tablet, and mobile without any extra configuration.

**Connect Any Component** Use your own custom-designed list items. Connect frames, components, or any design you create—the Draggable List wraps them and makes them sortable.

**Customizable Animation** Control the gap between items, padding around the list, rotation intensity, and spring animation settings. Fine-tune the feel to match your design system.

**Disable Option** Need to lock the list? Toggle dragging off with a single property—perfect for view-only states or conditional interactivity.

### Properties

Property & Description1. Items: Connect your components or frames.2. Gap: Space between items (0-50px).3. Padding: Padding around all items (0-40px).4. Max Rotation: Tilt angle when dragging (0-10°).5. Transition: Spring animation settings.6. Disable Drag: Toggle dragging on/off.

### Use Cases

-   Task lists and to-do apps
    
-   Priority ranking interfaces
    
-   Playlist or queue management
    
-   Kanban card ordering
    
-   Settings or preference lists
    
-   Navigation menu builders
    
-   Any sortable content
    

### Technical Notes

-   Built with Framer Motion's Reorder components
    
-   Handles viewport resize automatically
    
-   Touch-friendly for mobile devices
    
-   Accessible with ARIA labels
    
-   No external dependencies beyond Framer Motion
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #3003

## Details

- **Author**: Duopixel Studio
- **Price**: $8.00
- **Published**: 2026-01-22
- **Updated**: 2026-01-21
- **Added**: 2026-01-10
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase