Code Component
Framer X

How to implement drag and drop?


Use the Draggable component to implement drag-and-drop interaction.

Key steps

1. Import Draggable

import { Draggable } from 'framer'

2. Use onMove to update its position

  onMove = e => {
    this.setState({ left: e.x, top: e.y });


3. Set its constraints prop

  constraints={{ x: 0, y: 0, width: 100, height: 100 }}

Note: this constraints prop is quite important. Without it, the Draggable will be moved back to its original position when the mouse is released. I got stuck on this for quite a while!

PS: If you find this tip difficult to understand, check out this course I prepared for you, where concepts are explained in a more digestible way. No programming experience required!

PPS: See other pro tips, or share / request a new tip.

download Want the complete source file? Enter your email address below:

I'll also send you new tips when available. No spam, unsubscribe any time!

© 2019 jimu Labs, Inc.