Repeater Drag & Drop Challenge - Implement a Reorder-able List

repeater-widget

#41

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.


#42

Ahhh, got it, thanks!


#43

Hello everybody,
Perhaps a stupid question but can this also be simulated using an up and down arrow with click function?
Regards


#44

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.


#45

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: ?


#46

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?


#47

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.


#48

resort on click…
reorderableRepeater2.rp (75.2 KB)


#49

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? :confused:


#50

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’)?


#51

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


#52

Hello hellokat :wink:

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.


#53

very nice axure skills


#54

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!



#55

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.


#56

Thanks, Gregor! I’ll try your ideals, especially the third one.


#57

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




#58

Hi eunicedo,

Welcome to the Forums! :slight_smile:

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!


#59

Hi Gregor., Can you please help me on this Horizontal Drag and Drop + Reorder


#60

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