Reordering and moving rows using repeaters

repeater-widget

#1

I just want to share these repeaters allowing rows reordering and copy or transfer of rows between repeaters by drag and drop.

It builds on the approach from mnearents (https://forum.axure.com/u/mnearents) in this thread:
Drag and Drop Reorderable Repeater (Drag and Drop Reorderable Repeater).

The main features are:

  • lists (repeaters) can be placed inside any DP (no global/local coordinates issue)
  • lists are reorderable
  • you can move rows from a list to another
  • rows can be removed or not from the source list when dropped onto a target list
  • no global variables

I’ve included in the rp file images explaining how it works and how you can use them.

reorderable moveable repeaters_pdc_2.rp (1.3 MB)

Hoping you’ll find this stuff useful.
Cheers,
Phil


Interaction: moving items from repeater 1 to 2 + move up/down
#2

This is absolutely fantastic and works exactly as expected! It’s saved me a huge amount of time prototyping a drag and drop layout.

I would really like to have an ‘empty’ state for each list. It should have the following properties:

  • It will allow items to be dropped onto it
  • It cannot be dragged
  • It is only visible if there are no (other) items in the repeater
  • It is styled differently (I know how to achieve this)

I have two hypotheses of how I might achieve this:

  1. Have an “empty” repeater item in each list. Every time the repeater get updated, a filter hides this item if repeater.itemCount > 1.

  2. Have an element outside of the repeater act as a drop zone. Anything dropped here will be added to the repeater. The order it’s added to the repeater doesn’t really matter as the repeater will always be empty when items are dropped here. This can be placed behind the repeater, at the same size as a repeater item, therefore only being visible when the repeater is empty. It will need to be grouped with the repeater somehow to allow multiple lists each with a repeater and a drop zone.

  3. Another approach I haven’t thought of…

Any thoughts on which is the best approach?


#3

Either could work. I think second approach seems easier. You could set it up in a dynamic panel, where State1 is your drop zone and State2 is your repeater.