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?