Draggable List Component
Create interactive, sortable lists in Framer with smooth drag-to-reorder functionality.
What's Included
- DraggableList.tsx - The main code component
- Fully documented properties
- Ready to use immediately after import
Features
- Drag to Reorder - Smooth animations as items swap positions
- Dynamic Rotation - Items tilt based on grab position (left grab = tilt left, right grab = tilt right)
- Fully Responsive - Works on all screen sizes, items adapt to container width
- Connect Any Component - Use your own custom-designed list items
- Customizable - Control gap, padding, rotation, and spring animation
- Disable Option - Lock the list when needed
How to Use
- Add the Draggable List component to your canvas
- Create your list item designs as separate components
- Connect your items to the "Items" property
- Customize gap, padding, and animation settings
- Preview and publish!
Properties
| Property | Description | Default |
|---|---|---|
| Items | Your connected components | - |
| Gap | Space between items | 8px |
| Padding | Padding around list | 0px |
| Max Rotation | Tilt angle when dragging | 3° |
| Transition | Animation settings | Spring |
| Disable Drag | Toggle dragging | Off |
Requirements
- Framer (Web, Desktop, or iOS app)
- No additional dependencies required
Support
Having issues or questions? Reach out and I'll help you get set up.
Refund Policy
Due to the digital nature of this product, all sales are final. Once the component file has been downloaded or accessed, refunds cannot be issued.
Before purchasing, please:
- Review the description and features carefully
- Check the preview/demo to ensure it meets your needs
- Ensure you're using a compatible version of Framer
If you experience technical issues with the component that prevent it from functioning as described, please contact me first. I'm committed to helping resolve any legitimate issues and ensuring the component works as intended.
Refunds may be considered in exceptional circumstances:
- The component is fundamentally broken and cannot be fixed
- The product was significantly misrepresented
Thank you for understanding and supporting independent creators!
By clicking "Pay now," you authorize Polar Software, Inc., our online reseller and merchant of record, to charge your selected payment method the amount shown above, and agree to the Buyer Terms. This is a one-time charge.