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
Draggable cards
Drag and drop accordions
Drag and Drop behavior prototype
How to drag and drop outside a scrollable dynamic panel
Drag & drop + resize of table column
Drag multiple items
#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.

#4

wow this is great and so useful for me since I’m trying something similar but maybe a little more complicated as a newbe.
would this drag and drop reorder functionality between two list also be possible with some more rows opening up by accordion? Lets say sub items? I mean those rows are hidden if accordion is closed but they should be copied between lists and reordered together with their parent item.

#5

ok copying is now done. now focusing on reordering. For that I would love to have the highlight effect while dragging an item over another item.
In general I got it working, but seems to be not working for repeaters which are nested in a scrollable dynamic panel.
it was not intended to do as mentioned here?

@pdcdec or @mnearents do you have any idea how to solve that?
Here is your example with a scrollable DP at the left. Scroll down a little and the highlight effect dowsn’t work properly anymore
https://35h9xg.axshare.com

kind regards

#6

Hi iamable,

Thank you for pointing this out.
You’re right, the component works only if the DP is not scrolled. It does’nt take into account the Y offset of the scrolled DP.

I guess the solution is to use the ‘scrollY’ property of the parent DP (or the parent DPs).
At the moment, I’ve no time to check this further (sorry), but it should not be too complicated.

Thanks for your interest,
Phil

#7

Thank you for your help. Got it working with a second Ghost widget which is hidden with a y offset of scrollY. This widget is used within the mini_row_sensor instead of the first ghost widget which is now only for visual appearance

#8

Just to reiterate how useful this has been for me too, thanks Phil @pdcdec .

Two things I’m trying to add:

  • To change the cursor when I hover, about to drag, so the user has a good idea that they can drag (I hope I’ll be able to work this out for myself but so far, adding events to dp_ghost or the repeater items hasn’t worked)
  • And the thing I am sure I won’t be able to achieve - having nested draggable items:

E.g.

  • Peter
    ** Peter’s thing one
    ** Peter’s thing two
  • Jane
    ** Jane’s thing one
    ** Jane’s thing two

So I could move Jane’s things up and down within “Jane” (NOT into Peter’s things) but also I could move Jane and her things above Peter and his things.

You can’t nest repeaters of course so the repeater items would have to have some understanding of child items. Sounds tricky to me! :slight_smile:

Thanks again!
Tim

#9

This thread has been really helpful for me as an Axure newbie. I do have one question, though—is there a way to do this without drag and drop? I have a repeater with a menu in each row that has “move up” and “move down” options. When you hit “move up,” it should move up one spot, and when you hit “move down”, that item should move down one spot. I can’t figure out a way to do this.

#10

Hi guys!
A quick update to simplify the way the overlay effect is handled. Now I simply use show/hide instructions. Originally I used a column called ‘overlay’ in the repeaters and I’ve noticed some ‘freezing’ with several long repeaters.

Have fun!
reorderable moveable repeaters_pdc_2b.rp (1.4 MB)

Phil