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

repeater-widget

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