question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to set draggable position?

See original GitHub issue

setting x and y on <Draggable /> doesn’t do anything

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Reactions:5
  • Comments:20 (4 by maintainers)

github_iconTop GitHub Comments

21reactions
mzmrkcommented, Feb 15, 2018

For any googlers that come here. I found a cheesy way to solve this. I digged trough source code to find this hack.

<Draggable 
  axis: "none"
  position: {
    x: yourPostion.x
    y: yourPostion.y
  }
/>

With axis set to none, you get direct control over position during drag. It makes <Draggable /> to stop using internal this.state.position during drag and use this.props.position instead.

To Owner/Collaborators: Please mention this solution as an alternative in the docs. Rather than rebuilding whole state management using <DraggableCore />

15reactions
STRMLcommented, May 19, 2016

There is now position and defaultPosition props in 2.x that mirror how React handles form components.

@burgalon - Have some respect for people who take the time to provide you free software. If you don’t like it, submit a PR or leave.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Set position of draggable div - Stack Overflow
I've defined a dragable div, and it works perfectly, but I want to set the position of the div when a click a...
Read more >
Setting a Draggable's initial position - GSAP - GreenSock
You should be able to set the initial draggable position using set() or you can even tween it to its starting position. Basic...
Read more >
Make a draggable element - HTML DOM
Indicate the element draggable */ cursor: move; /* It will be positioned absolutely */ position: absolute; /* Doesn't allow to select the content...
Read more >
Draggable - jQuery UI
Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within...
Read more >
How To Create a Draggable HTML Element - W3Schools
Learn how to create a draggable HTML element with JavaScript and CSS. ... The only important style is position: absolute , the rest...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found