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

repeater-widget

#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
#61

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


#62

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.


#63

[QUOTE=Gregor;25924]Here is the rp :wink:

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)


#64

[QUOTE=Gregor;25924]Here is the rp :wink:

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)


#65

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.


#66

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


#67

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


Can dynamic panels be nested within a larger dynamic panel to enable scroll and drag and drop interactions?
#68

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?


#69

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.


Can dynamic panels be nested within a larger dynamic panel to enable scroll and drag and drop interactions?
#70

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!


#71

where is challengeHeight calculated - please share!


#72

@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 :slight_smile:


#74

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


#75

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.


#76

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.


#77

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