Back to Playground
Interaction

Drag and Drop

Smooth drag and drop interactions using Framer Motion with gesture controls and layout animations.

ReactFramer MotionTypeScript

Drag and Drop

Smooth drag and drop interactions using Framer Motion with gesture controls and layout animations. Perfect for kanban boards, sortable lists, and interactive UIs.

Basic Draggable Element

Drag the card around with constraints and elastic boundaries.

Drag me around!

Reorderable List

Drag items to reorder them. Uses Framer Motion's Reorder component for smooth animations.

  • ⚛️React
  • 📘TypeScript
  • ▲Next.js
  • 🎨Tailwind CSS
  • ✨Framer Motion

Kanban Board

Drag tasks between columns to change their status. Add new tasks or delete existing ones.

To Do

2

Design landing page

Implement authentication

In Progress

2

Write API documentation

Set up CI/CD pipeline

Done

1

Deploy to production

Key Features

✓ Drag Constraints

Limit dragging to specific boundaries

✓ Elastic Boundaries

Smooth bounce-back at edges

✓ Layout Animations

Automatic animations when items reorder

✓ Gesture Controls

Scale and rotate while dragging

Perfect For

✓ Kanban Boards

Task management and workflows

✓ Sortable Lists

Priority ordering and rankings

✓ File Uploads

Drag and drop file interfaces

✓ Dashboard Widgets

Customizable layouts

Code

const DraggableCard = ({ id, children }) => {
  return (
    <motion.div
      drag
      dragConstraints={{ 
        left: 0, right: 300, 
        top: 0, bottom: 300 
      }}
      dragElastic={0.1}
      whileDrag={{ scale: 1.05 }}
      dragTransition={{ 
        bounceStiffness: 600, 
        bounceDamping: 20 
      }}
    >
      {children}
    </motion.div>
  )
}