you can reduce the size of the rectangles to 1,1 and hide them, I made it visible to make it easier to understand the proceed. keep in mind, that it is always the dynamic panel that is moved. place all your repeater.item stuff in this wrapper.
Repeater Drag & Drop Challenge - Implement a Reorder-able List
Hello everybody,
Perhaps a stupid question but can this also be simulated using an up and down arrow with click function?
Regards
If You want an up- down Click i would not go with this approach. Not losing the drag is the reason for not redrawing the repeater.
On click⌠Individual index column and adding a sort⌠Hmmm still need a feedback from other repeater items to calculate the right individual index.
On a high level proceed of this example may be useful.
On the other side. If redrawing the repeater is not necessary you can also use the exact example and copy the cases causing the switch to a onClick event.
Hi Gregor,
What do I do with the move âthisâ with drag and the onClick event in case I go for the high level example?
Move to x: ? y: ?
All amazing stuff here, thanks @Gregor.
I have an additional question. Is it possible to use multiple dynamic panels within the repeater?
I have 4 widgets that I need to re-order, however, each one of these has a widget in it that can have a specific state (for simplicities sake, letâs say a toggle button with 2 states) that differs from one panel to another.
Is there a way to put each one of these panels in to the repeater? Currently if I put more than 1 in, then only the first one is shown (which I guess is the standard operation of the repeater). Is there a way to use a different state based on the index in the repeater?
unless you try to have different dimensions per repeater.item a big yes.
this sorting is based on the guess that all items have the same size, if this rule is broken the width causing the swap is no longer the drag element but the drop targets on the other sides⌠or up and down, depending on the orientation. would be fun to build it but the current solution would not support this.
Hi,
I love this reorderable repeater widget, but it doesnât play nicely with the other widgets in my project.
The reordering works fine on a page by itself. The functionality breaks down as soon as I introduce other widgets with dynamic panels or masters.
Iâve spent so much time troubleshooting it, and I canât figure out how to fix it. Has anyone else had this issue?
Can you share the file that isnât working? If it contains sensitive content, can you strip that out or replicate the issue in a sanitized document? Iâve tried adding widgets and such to Gregorâs file and it all works fine. Besides, simply adding widgets shouldnât break it.
Did you accidentally delete the helper widgets associated with each example (named âlistenAndTellâ)?
Hi Gregor,
thanks so much for this great file. It does exactly what I need to do, but I have a very silly problem: I edited it with my content but when I copy paste it into my prototype it isnât working. I can still drag the fields but the drop doesnât work - they go all over the place.
Anyone knows what I am doing wrong?
Thanks,
Kat
Hello hellokat
It looks like Gregor posted several files during the course of this thread. Which one were you copying and pasting the example from? If youâre still having the same problem now, you can post your file here so that we can help you figure out whatâs going wrong. If youâd rather keep it private, please send it to support@axure.com so that we can take a look for you.
Hey Gregor!
Awesome!
Iâm still a newbie at Axure, so I got some questions. I hope you can help me.
First: How can I edit the style of the text? I edited the style in the rich text editor, but nothing happens. I want to change the alignment, font and size.
Second: How can I constrain the movement? I donât want to allow the drag by x, but only by y. So the element should only move by y, but not by x with the mouse.
Third: I got other dynamic panels besides the repeater widget, that should move with the repeater. I.e. I got some project gantts that belongs to the project name (represented by repeater). Is a movement of a dynamic panel of the repeater, the corresponding project visualization has to move, as well.
For better visualization take a look at my screenshot.
Thanks in advance!
I have a number of ideas, basically three and a half. I didnât try, perhaps not all are working.
Idea one âManuallyâ:
OnDragdrop a case for each related dynamic panel and move the panel. This is not elegant because it is hard to maintain. I recently used that proceed to position tags in a tag-cloud driven by a repeater.
Idea two âConnected repeatersâ:
2 seperated dynamic panels. The reordered repeater never rerenders, the sort (as far as it is about data) stays and the values in the dataset are not touched. I imagine a mapping of values and a real reorder of the second repeater.
Something like updateRepeater(2) -> where itemIndex == targetitemIndex // lfdNr. = lfdNr.
after giving this a second sort by lfdNr. (i dont remember how i named this customIndex).
Idea three âenlarge repeaterâ:
a) âmove everythingâ
add the gant-row to the repeater and move it with the item (e.g. onMove(this) -> move gant with this)
b) âmove seperatedâ
move only the text, onDragDrop when the new position is calculated move the gant-part of the repeater⌠perhaps it is even nicer to rearange the gant-part at the ârow-stepsâ.
If you have actually problems formatting the repeater content all three ways might be to difficult. Consult the learning area of the axure website. There are a number of repeater tutorials.
You will be able to ajust the text if you use setText -> ritchText instead of value. To change the appearance of repeater you have to understand what the repeater does. You build a âprototypeâ of an object and you define a dataset. Then the repeater is rendered, while rendering (onItemLoad) the âprototypeâ of your object is taken, updated with the values from your dataset and added to the screen. This will be repeated (repeater!) while data(rows) are available.
Hi there,
Iâm new here, so iâm not sure if iâm replying at the right thread.
I am trying to edit each field with my own graphic and i need to position the text a certain way.
Is there a way around that? Your file is super amazing.
I canât even put it into words.
Eunice
Hi eunicedo,
Welcome to the Forums!
To position the text a certain way, choose the ârich textâ option in the Set Text dropdown. Thisâll open up the text editor dialog, where you can then edit each text to your own formatting.
Let me know if I misunderstood or you have any questions!
Just wanted to post this here. Itâs an alternate way to do a drag and drop repeater, which actually reorders the repeater. It has limitations. For example if you have a table of data where each column is sortable, it would mess everything up. Anyway, enjoy and if you see any issues, let me know.
reorderable repeater.rp (288 KB)
Horizontal Drag and Drop + Reorder