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

[Denniz]

Hi Gregor,

I saw your reorderable list. Nicely done! i am a rookie and before i go digging deeper yet finding no answer, could you tell me if the following is possible?
To drag and drop an item from one list to another list? all on the same page. i use rp8 if its any help

thank you in advance

[Gregor]

you will need a droptarget.

onDragDrop
if item is over droptarget
addTo (target) Repeater
if necessary remove item from repeater

you (at least i) can do it.

[alextim]

[QUOTE=Gregor;25924]Here is the rp

I calculate the item height, it should be easy to edit.[/QUOTE]

Hi Everyone, new to this forum.

This drag drop repeater is all I was looking for, so first thanks so much for that!\

But I have one issue I hope you can help me with that as I’m no big expert on how you achieved this repeater in the first place.

I have a repeater that supports removing and adding rows to it, but then the drag&drop stops working… any idea on how to solve this?

Attached
Repeater_DragDrop.rp (194 KB)

[alextim]

[QUOTE=Gregor;25924]Here is the rp

I calculate the item height, it should be easy to edit.[/QUOTE]

Hi Everyone, new to this forum.

This drag drop repeater is all I was looking for, so first thanks so much for that!\

But I have one issue I hope you can help me with that as I’m no big expert on how you achieved this repeater in the first place.

I have a repeater that supports removing and adding rows to it, but then the drag&drop stops working… any idea on how to solve this?

Attached
Repeater_DragDrop2.rp (119 KB)

[Gregor]

calculations are based of a custom index. deleting a row makes a gap in the index (id).

i can imaginge that the problem is solved if the id is set in the on load event of the repeater (update row id -> id = index) and the onLoad event is fired after removing the item but perhaps i would do this as a second try… first try is to remove the gap “manually”
markRows (id > this.id)
updateMarkedRows (id++)

the values of the current sort are “fluent” if you want to keep the sequence after deleting you need to store the id to the repeater data and sort by id. the event when it has to be done is the onDragDrop. the problem is that all values have to be stored at once.

perhaps the solution is to mark rows.

totalDragY > 0:

• mark rows index>this.index && index < this.index + (totalDragY / item.height)
• updateRow (marked rows) id = id - 1
• updateRow (this row) id = currentId
  totalDragY < 0:
• mark rows index<this.index && index > this.index - (totalDragY / item.height)
• updateRow (marked rows) id = id + 1
• updateRow (this row) id = currentId

something like that… it will of course need some investigation.

[alextim]

hmm… thanks, I don’t know how exactly but going to try and do what you suggest now

[mnearents]

If it’s easier, you could also try this repeater. It has drag and drop and row deletion, you can easily modify it for row addition:

Drag and Drop Reorderable Repeater

[zalle]

Hi,

I’m trying to use the first version of Gregory’s repeater and I must start off by saying it’s awesome!

Now to my issue:

I have a specific case where I need to be able to set specific items in the repeater as selected based on certain conditions. However, setting one (or more) repeater items as selected breaks the drag and drop functionality (in Gregorys file as well). Does anyone of you know why it behaves this way for this specific case?

[Gregor]

any update on the repeater dataset will cause the repeater to rerender. each onItemLoad will be executed, including the positioning.
drag actions are terminated.
thats why i added hidden fields to the repeater items to store stuff instead of updating the rows.
in the current repeaters updates on multiple repeater items are possible with the listener concept from inside the repeater.
if you want to update the repeater data store everything while draging in fields in the repeater item, fire an event to a widgets outside the repeater and from this widget an event to the repeater.item. this event should then update all columns by the values of the fielsd inside the repeater.item(s). to make sure the sequence of items will stay after the rerendering you might need to insert a column for custom id. i think in the early versions there was no item.index variable and i added a custom id row, in later versions i used the item.index variable.
however, if you want rerender the repeater you have to store the position after drag drop and sort the repeater by these values.

[ELee]

Gregor,

Nice work! I’d like to rebuild this from scratch so I have a better understanding…did you by chance document your steps? If not, something high level would be awesome. Thank you!

[ELee]

where is challengeHeight calculated - please share!

[Steve_AxureRP_pro]

@mnearents & @alextim These are both great, I love the ‘move too’ and ‘Delete’ information’ I’d like to combine them for a project i’m working on, keep you posted. Thanks for sharing the files

[Frankringer]

That was good that you are telling such an important thing.

[Camilla]

Hello all. I am new to the forum and Axure, so please forgive me about any of my faux pas. I am working on a drag and drop repeater - this is something I copied and modified and working to build on from another thread… my challenge is not knowing the correct syntax for adding more than one repeater item into an event. Say I already have a [[TargetItem.Label==VarLabel]], what is the syntax to append another one like [[TargetItem.Label==VarTag]], so I can pair both name and tag values with the same event.
Thank you in advance.

[Camilla]

Hello all, especially Gregor for what I hear is a brilliant solution. @Gregor - would you mind sharing your very original solution on this, I am unable to access the RP file mentioned at the top of this thread.
Thank you so much in advance.

[Camilla]

I found it, It was further up in the thread.