Set Drag Position Boundary

Have you searched the Docs and Knowledge base?
Principle Version: 5.9
macOS Version: 10.14.5
Sketch Version: N/A
Description of what you need help with:

Is it possible to set an x-axis Drag limit on a draggable element? Note this is explicitly a horizontal Drag function, NOT Scroll. I was able to set boundaries for a Scroll element with a 0x0 container and a child element’s dimensions creating the boundary, but this has to be Drag.

I have a dummy element (in the end would be transparent) as a handle which is driving the width of the slider bar and that works fine. I just need to constrain the x position of the handle so it doesn’t slide off the screen.

Steps to reproduce the behavior:

  1. Set element to Horizontal Drag
  2. Drag element off screen

Screenshots/Sketch File/Principle file: (if applicable)

It should be easy with Drivers.
Just create two Keyframes for Position X under drivers, for drag event.

1 Like

Unfortunately no. I do believe you are missing the point. I am already using Drivers and while I was only showing the dummy handle (the blue square) that drives the slider bar, I am now explicitly showing a handle with its x position values set by the blue square driver and THAT is the element that can be dragged off the screen. So even though the slider handle’s x position is set and is in view, it cannot be used once the driver is released off the screen.

Hi Phipps,
do you have found a solution to your problem yet? I have exactly the same issue and would love to hear from you, if have solved it somehow.

Greetz, Ben

The solution is to create a group for your handle and use that group as your driver. Then you can control the position X or Y for the handle element that’s within the group. For example, when the horizontal drag of the driver(the group) is larger than 10, you can set the handle element to minus X to cancel the X movement. In that way, even you drag the group out of the bar, the visible handle element will remain in the boundary

1 Like