Set draggable position pogrammatically

[lochstar]

No description provided.

[lochstar]

The more I think about this, the more I feel that position should replace start.

The component keeps track of clientX and clientX in state but will honour the position prop on init (replacing start) and if position changes.

Thoughts?

[STRML]

This is what DraggableCore is for. Simply setting a position and changing
the state if it changes is not robust - for instance, imagine a Draggable
that starts at 0,0. The user drags it and you want to reset it back to the
origin. If you set a position of 0,0, that would not be detected and the
Draggable would remain where it is.

If you need full control, manage the state in the parent using core.
On Feb 26, 2016 4:52 PM, "Lochlan" notifications@github.com wrote:

The more I think about this, the more I feel that position should replace
start.

The component keeps track of clientX and clientX in state but will honour
the position prop on init (replacing start) and if position changes.

Thoughts?

—
Reply to this email directly or view it on GitHub
#140 (comment)
.

[lochstar]

Thanks for replying. DraggableCore works really well for what I was trying to do.

I still think there’s something to be gained by modifying the way react-draggable works. Have you considered making it a controlled component? Similar to to how React natively treats <input>.

If position is not passed, it will function as an uncontrolled component. start would be treated like defaultValue on an <input>, maintaining it’s own internal state. Which is how it currently behaves.

If position is passed, it is a controlled component. It will render according to position when the draggable is not currently being dragged. This way the user can decide to accept the x/y values onStop. This gives us the advantages of CSS transforms, bounds, axis etc., that <Draggable> provides.

So, it's really just adding the position prop to allow the user to accept the draggable's position before/after a drag. What do you think?

[vogelino]

Hi and thank you for developing react-draggable! Really nice and complete!

I must agree with @lochstar. Being able to override the values on stop based on custom calculations would be quite powerful. We would be still able to take advantage of other functionalities also. I like the idea of making it a controlled component.

👍

[STRML]

@lochstar I like that idea. I'm going to think about implementation. Traveling at the moment so it may be a bit.

[KODerFunk]

👍 Already use this fork!

[KODerFunk]

Have some problem(
All works fine, problems only on iOS web-view (iOS 9.x / iPhone 6s): http://take.ms/bhjbu
I do not know whether only in this fork, or a master too, there is no time to test, but the problem is there. The process of dragging work.
In the desktop Safari all ok.
And how turn off massive console output from react-dragglable?

[burgalon]

I'm also using this branch. Please consider merging

[STRML]

Okay - I'm going ahead with this approach. See v2.0.0-beta1.

[STRML]

This is still a WIP - I think it may be more useful to deviate slightly from how React does <input> and still allow the Draggable to be moved while a position is present. It should, however, snap back to its original position on drag end. If you really want to make it immobile, it make more sense to send a position and axis="none". Does that make sense?

[lochstar]

@STRML agree with exactly what you said. If you want to disable dragging could a disable prop just be set?

[STRML]

Actually - we already have one, and I forgot about it! I'll make the tweak and release a beta2.

[STRML]

beta2 is out, along with an update to the examples showing how to attach handlers to controlled components.

[burgalon]

@STRML agree about the disabled and snapping back on drag end.
Thanks for the beta2!

[STRML]

v2.0.0 is out!

[burgalon]

sweet

[lochstar]

Nice work!