leonaves/react-touch

[Suggestion] Allow bounds for Draggable

silicakes opened this issue · 1 comments

I'd like to limit the movement of the element to a certain bound.
Today, It's possible with the following code

<div style={translateY <= 0 ? {transform: ``translate3d(0, ${translateY}px, 0)``}: {}}...

Where translateY is the property passed from the draggable function.
The code above will prevent the element from moving below its current position.

However, the <draggable/> component keeps an internal registry of the position, so if I'll move it down for a while - nothing will happen to the UI, but when I'll try to move it up - it will remain still until the internal value reaches below zero.

draggable issue

There are two possible solutions I can think of:

  • create a configurable threshold and prevent the internal counter from keeping out of bound values
  • poll the position data from the UI (don't like it) so that it basically acts the same.

What do you think?

The first one is obviously best. I'll take a look at some point. Good shout.