Can dynamic panels be nested within a larger dynamic panel to enable scroll and drag and drop interactions?


#1

Hello. I have a task list. I want to be able to scroll through the task list as well as be able to drag-and-drop items on that list. Currently, I have each item listed in its own dynamic panel so that they can be dragged-and-dropped. How can I get the list to scroll? Is it possible to nest these dynamic panels within a larger dynamic panel that can scroll? Or, is there a better way to achieve my objective?

Thanks in advance for your help!


#2

Hey askure
I’ve once got this working with a repeater. See this thread:


At the end they have a working example attached.


#3

Yes, you’ve got it. You can select any type of and number of widgets, including dynamic panels (dp)–everything in your list–then right-click and choose “Convert to Dynamic Panel”. For that outer dp, ensure that “Fit To Content” checkbox is unselected. (If you resize the dp, which you’ll likely need to do to make it smaller than the list and thus in need of scrolling, this will automatically get unselected.) Then choose “Scrollbars: Show Vertical as Needed” (i’ll assume you want vertical scrolling, but all of this works for horizontal scrolling as well.)

  • User can then use the scrollbar to scroll
  • Mousewheels are supported
  • Touch-drag scrolling on mobile is supported

If you want to hide the (browser-default) scrollbars, first take note of the dimensions of your outer dp. Then increase the width of your outer dp by at least the width of the scrollbar. 20px ought to do it. Convert that outer dp into another dp (one more layer of nesting) and set its dimensions to match those you noted. Now this will mask out the scrollbars, but they will still work. Test out in your browser or Axure Share app and adjust sizes as needed.


#4

Thank you for the clear directions, mbc66!

After creating the dynamic panel with scrollbar, I tried dragging the items in the list to another place on the page. I’m able to select the item, but when I drag it out of the dynamic panel, it disappears from view. How can I fix it so that an item from the list can be dragged into a time slot to the left of the list? I’ve attached the file so you can see what’s happening. Thanks!

Drag-and-Drop-Demo.rp (88.4 KB)


#5

Take a look at this .rp file in the thread that @freiand posted:

Here is a description of the basic approach:


#6

Thanks, mbc66. I’ll check it out.