Code
Code Component
Framer X

How to implement drag and drop?

Overview

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 });
  };
  
  ...

  <Draggable
    left={this.state.left}
    top={this.state.top}
    onMove={this.onMove}
    ...
  />

3. Set its constraints prop

<Draggable
  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!


© 2018 jimu Labs, Inc.