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

repeater-widget
#21

This answers a question I posted yesterday - thank you!

#22

I know. :wink:

#23

I have no clue how to make reorderable grid (building a dashboard with widgets). Itā€™d be sweet if anyone would point me into the right direction.

#24

depends on the behaviourā€¦ the easiest is if the repositioning only changes the position of the drop-object and the drop-target.
onstartdrag write the position in variables, ondrop move drop object to drop target position and drop-target to stored position.

#25

Thank you Gregor for your rp file. It works perfectly for what I need to prototype.

In addition to having the ability to drag and drop to reorder, say in your example, the city names need to have editing ability. Is there a way to do that? I tried to do that in my prototype but text field and dropdown donā€™t seem to work. I probably overlooked some variables somewhere. Attached is my RP file.
field reorder test.rp (92 KB)

#26

seems that the start drag captures the cklick and does not pass the event to the field.
i donā€™t remember, if moving the actions will influence the functionality.

my proceed would be to place the drag and drop options at a hotspot inside the dynamic panel and place the inputs aboveā€¦ nope wont workā€¦

place the fields outside the dynamicpanel and move them with the panelā€¦ performance might be poor. No its not - Allright, place the fields outside the dynamic layer (inside the repeater item) select the onMove event of the dynamic panel and choose the move action. select the fields and use the option ā€œwith thisā€. to keep the fields in the foregroud you have to place them in the foreground after placing the dynamic panel in the foregroundā€¦ this happens in the startdrag event of the dynamic panel.

I just had a look on a number of threadsā€¦ this issue is a bug that is solved soon. 2nd approachā€¦ wait and update.

#27

Hi Gregor,

I tried out your workaround and it works perfectly. Thank you so much for your help and your fast response!!! This community is awesome and I am grateful for everything. I am looking forward to the fix of this issue. Hopefully it will be soon.

#28

Gregor, you have no idea how useful this is for me right now. Many, many thanks!

#29

your welcome.

#30

Iā€™m trying to implement something similar but Iā€™m confused about something: when do you assign the value of challengeHeight? I donā€™t see it anywhere. How does it work if itā€™s always void. What am I missing?

Edit ā€“ As always, I was just not paying attention. I still canā€™t get it to work exactly how I want it to but Iā€™m a lot closer. Thanks again!

#31

take in concideration that this example was build with an early beta. repeater.item.vars like index were not available, some solutions are ā€œhome-brewnā€.

the general magic of this example are the item internal and the repeater external ā€œlistenersā€ to establish a workin communication and to be able to trigger an item by its index without redrawing the repeater.

#32

Has anyone figured out how to do this? Swapping two widgets is fairly simple, but is it possible to have them reorder in a grid as you do in a list?

#33

Has anyone figured out how to do this? Swapping two widgets is fairly simple, but is it possible to have them reorder in a grid as you did in the list?

#34

Gregor, your solution is brilliant! :slight_smile:
But I have to adapt it to the horizontal mode (something like sorting in groovesharkā€™s playlist) - and Iā€™m trying to find out, howā€™s your solution workingā€¦ with no conclusion.
Iā€™ll be glad if you (or anyone) could explain briefly how it works [Iā€™m not so advanced in axureā€™s variables].

Iā€™ve tried to simplify this dragā€™nā€™drop without repeater, with just only 3 hand-generated dynamic panels and still - no satisfactory effects can be achieved by me ;(

Thanks for any help!
Cheers!

#35

my solution does not reorder the repeater, it only reorders the appearance.

if the dropdistance of an item is larger than the item i determine the drag direction and move the item located in this direction by its dimensions into the other direction.
this requires to execute an action caused by a ā€œsiblingā€-item. this is not possible. it is possible to cause an action (move) a parent widget. thsi parent widget outside the repeater has to tell the index of the item that should be moved and the direction of movement. to be able to execute an action you need a construct i call item listener. its a widget with a case: if itemtomove == indexā€¦

this is basically the magic.

#36

Like everyone else in this thread, I found this repeater to be fantastic. I need something very much like this, but I need it to be horizontal. I tried modifying your RP (swapping X for Y, width for height, and making the repeater layout horizontal), but I must be missing something, as I canā€™t quite get it to work.

Any suggestions?

#37

The first reorderable repeater is more complicated then today necessary. Then the repeater was in a beta and i had to calculate the index. I did a rebuild and did it horizontally. Its quick and dirty, I dont catch the exceptions when the item is dragged more then the item width outside. the switch should not be called if the index is already 1 or repeater.countā€¦
that is something you can figure out on your own.

howeverā€¦ simplified horizontal reorderableā€¦ you find it attached.
reorderableRepeater2.rp (63.9 KB)

#38

Amazing, thank you!

#39

your welcome

#40

Amazing, thank you! One thing I noticed though is that when I move a column it takes on the name of the column it replaced, making it look like nothing moved. How do I fix that?