Functionalities in an dragable dynamic panel are not working


#1

Hi,
I have the challenge, that I want to have a dynamic panel, which is dragable (a lightbox which can be moved around on the screen). But I have also the requirement of some functionalities in the dynamic panel which should work, too.
But if a make a dynamic panel dragable, of course no other functionality in the panel works.

Does anybode has a solution/ workaround for that?

Thanks,
Max

59


#2

Hi @maxosh, can you please tell us more about what specific functionalities you’d like to see in your draggable dynamic panel? Also, if it’s possible, can you share with us a copy of your .rp file so we can take a closer look at it?


#3

Hi @Tanya_Axure, thanks for your quick reply!
In my draggable panel I want the functionality on the right top corner (close and minimize which both hides the panel) to be active. Which is, as I said, not possible, when the dynamic panel itself ist draggable.
My workaround is to have another dynamic panel with just the two functionalities above the dynamic panel which is draggable. But of course by dragging, it will move both dynamic panels.
But is there another better way to do this?

21 Untitled.rp (78.9 KB)


#4

Years ago I had to deal with a similar issue when prototyping for a touchscreen kiosk UI with a custom embedded OS. Essentially, it boils down to determining when the user wants to click vs drag and how to separate these two actions without having them block or cancel each other. I came up with a few solutions which I think work pretty well.

First off, this is possible, and clickable buttons inside a draggable panel do indeed work. The trick is that any cursor movement during the click–after the initial button-down or touch but prior to releasing the button or finger–will trigger the dynamic panel’s Dragged event which blocks the Click or Tap event of any button inside that dynamic panel. This movement is more common for touchscreen and mobile screens, where the finger can wiggle or slide a little bit before picking it up. Touchscreen UIs account for this by building in a “slop factor” for their native touch events. I don’t think Axure has native support for touchscreens, and I know it does not for multi-touch and full touch events, which are handled a little differently than traditional mouse click events. Most of the time this doesn’t matter, but in this situation it does.

Take a look at this demo, which has three different solutions to handle your “click vs drag” problem. Hopefully one of these can work for you.
draggable clickable dp.rp (187.3 KB)