Dynamic panel drag to limit / points

Hi,

Please can somebody help. I have been creating an iPhone prototype, and I have placed a dynamic panel with a list that can be dragged. However, it can be dragged continuously and the writing off of the screen, where as I would like it to stop scrolling when the list reaches the top and bottom, so just scroll from item 1 to 10.

I have attached the RP file, and I did look into the [[DragY]] and area of widget, but I guess I am missing the trick of how to do this.

Thank you so much for your time and help.

help_dragto.rp (135 KB)

Hi!

You can do this two ways if the target is device with a touchscreen.

  1. Using drag but putting limits on it using Math.max and Math.min by using Move To instead of Move with Drag on the Drag event
  2. Make the inner panel a scrolling panel

The second will behave more naturally on a device with a touchscreen - e.g., it will continue scrolling when flung. The first is good if you want to drag it with the mouse (but not scroll with the scroll wheel).

Both are shown live here, on two pages.

File: drag_to_scroll.rp (211 KB)

1 Like

Hi Joseph,

Thank you so much for your help with this and also for updating the RP file to prove the fix. I would have never thought about the Math.max and Math.min, and so you have saved me a lot of time.

Thanks again, it was exactly what I was after, and you have helped explain how to use this in the feature.

I know a way to simulate scrolling by dragging a panel on the y axis to limit points so it swings back into position when dragged over the limit hot spots, but does anyone know how to make the same concept work when widgets in the panel expand/collapse like a windowshade? Is there a way to deal with the varying heights of the scrolling panel content so that in the collapsed view the user doesn’t end up scrolling through a bunch of white space on the page before the scrolling panel swings back into place? Thanks!

Hi rickg7048,

Could you maybe give an example of a website doing the kind of drag you want to see? This’ll help me to fully understand what you’re looking for. Thanks!

The examples given are great! Thank you so much. I would have never thought I could use math in Axure to do this. I’m learning every day. Thanks again.

Hey guys, could you help me out? I’m trying to achieve something similar and it’s not really a problem to replicate the same effect but once I use first option (drag) links inside dynamic panels refuse to work. They work just fine with standard, limitless OnDrag move Y case.

Any idea what’s preventing this stuff from working? :slight_smile:

Hmm, how are your links set up? Do you have hot spots that sit on top of the dragged panel and don’t get moved with it? If you’re able to post your file here or email it to support@axure.com then we’ll be happy to take a look and see what might be breaking the links when you drag.

Hello josephxbrick,

I’d like to recreate this same scrolling effect, but horizontally though. I tried to swap the variables (i.e. height for width) to get there, but I’m obviously missing something. So could you please take a look at the attached file?

Thank you in advance for any help you can provide.

PS: As you can see in my avatar, I’m pretty basic at this; so if it requires some wizardry, would you be so kind to guide me through?

Hi Saraiva,

I poked through your file and it looks like the equation is set up correctly, but the “OuterDP” local variable that you’re referencing hasn’t been defined yet. Since a variable named OuterDP hasn’t been defined, the “OuterDP.width” part of the equation won’t return the expected value.

To create and define that OuterDP local variable, you’ll want to click the “fx” button in the “Case Editor” to open the “Edit Value” dialog, and then click “Add Local Variable”. Rename the variable from “LVAR1” to “OuterDP”, select “widget” from the middle dropdown menu, and then select the “OuterDP” dynamic panel widget from the last dropdown menu:


Now, the OuterDP local variable will reference the OuterDP dynamic panel when used in that equation, and the expression “OuterDP.width” will return the width of that dynamic panel. After doing this, the horizontal scrolling interaction should work as expected. :slight_smile:

I’d like to mention that you can also create this interaction by using an “OnDrag” interaction with “with drag x” selected and adding left and right boundaries. I attached an example file demonstrating this; feel free to check that out and let me know if you have any questions!
HorizontalDrag_example.rp (61.5 KB)

2 Likes

Hi Simon,

It worked like a charm! Thank you very much indeed!!!

Couldn’t check your Axure 8.0 file though. Is it’s not asking too much, could you please repost a 7.0 version?

Cheers!

Hi Saraiva,

I’m glad to hear that worked! I also apologize for not mentioning this earlier, but the ability to add boundaries to the “Move” action was introduced in Axure RP 8. If you’re currently using Axure RP 7, Joseph’s method might be the best way of implementing this functionality.

That said, I’d like to mention that the upgrade from Axure RP 7 to RP 8 is free for all existing license holders. This means that you can use your current license for RP 7 to activate RP 8 immediately at no cost. You can read about the new features introduced with the release of Axure RP 8 here:

https://www.axure.com/features/new-in-8

If you’re interested in upgrading, you can download the installer for the latest build of RP 8 here:

https://www.axure.com/update

I hope this helps! Please let me know if you have any questions. :slight_smile:

1 Like

Hi Simon,

I’ve downloaded the 8.0 version before, as a trial. But I didn’t know I could upgrade my 7.0 for free! Wow!!!

So I finally took a peek at your file, and this new functionality is just a dream coming true. Kudos for Axure devs!

I can’t thank you enough, first for guiding me through with screenshots and all, then for this upgrade tip. You’re the best!