Results 1 to 67 of 67

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

  1. #1
    Axure Fu Master
    Join Date
    Jan 2012
    Location
    Tel Aviv, Israel
    Posts
    111
    Thanks
    37
    Thanked 39 Times in 20 Posts


    My LinkedIn

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

    Hi Axure ninjas, I have a challenge for you!

    Does anyone know how to implement something like this?
    2013-08-06_1042 - shiraluk's library
    (gmail's tasks list)

    I'm not sure it can be achieved with the current repeater capabilities, but if so - that would be so awesome!

  2. The Following User Says Thank You to Shiraluk For This Useful Post:

    hmcelroy (08-10-2015)

  3. #2
    Apprentice Level
    Join Date
    Feb 2011
    Location
    Prague
    Posts
    91
    Thanks
    1
    Thanked 51 Times in 23 Posts


    My Twitter My LinkedIn
    Challenge accepted

  4. #3
    Axure Fu Master
    Join Date
    Jan 2012
    Location
    Tel Aviv, Israel
    Posts
    111
    Thanks
    37
    Thanked 39 Times in 20 Posts


    My LinkedIn
    melibrion, I can't wait to see what you come up with! Good luck!

  5. #4
    Sifu
    Join Date
    Aug 2013
    Location
    Europe (Germany, Austria, Switzerland...)
    Posts
    1,526
    Thanks
    22
    Thanked 588 Times in 476 Posts


    My Twitter My LinkedIn
    Bazinga
    How do you like this one?

  6. The Following 6 Users Say Thank You to Gregor For This Useful Post:

    Denniz (07-05-2016), DRC (10-16-2015), hmcelroy (08-10-2015), PixelPhil (05-08-2015), Sonya (01-07-2014), whybotherask (06-09-2014)

  7. #5
    Apprentice Level
    Join Date
    Jul 2010
    Posts
    96
    Thanks
    7
    Thanked 8 Times in 4 Posts


    @Gregor: Very Impressive!

    RL

  8. #6
    Sifu
    Join Date
    Aug 2013
    Location
    Europe (Germany, Austria, Switzerland...)
    Posts
    1,526
    Thanks
    22
    Thanked 588 Times in 476 Posts


    My Twitter My LinkedIn
    Here is the rp

    I calculate the item height, it should be easy to edit.
    Last edited by Gregor; 08-22-2013 at 12:14 PM.

  9. The Following 10 Users Say Thank You to Gregor For This Useful Post:

    alextim (08-04-2016), AutumnBeth (02-26-2015), Ben78 (12-11-2013), hmcelroy (08-10-2015), maitebaran (04-10-2014), mgnta (05-16-2014), scholzco (04-22-2014), strelec (08-13-2015), tithij (09-12-2014), whybotherask (06-09-2014)

  10. #7
    Axure Fu Master
    Join Date
    Jan 2012
    Location
    Tel Aviv, Israel
    Posts
    111
    Thanks
    37
    Thanked 39 Times in 20 Posts


    My LinkedIn
    Wow! looks great
    I only played with it a few minutes, I'll look at the rp as soon as I get a chance.

    Great work!! Very exciting!

  11. The Following User Says Thank You to Shiraluk For This Useful Post:

    maitebaran (04-10-2014)

  12. #8
    Sifu
    Join Date
    Aug 2013
    Location
    Europe (Germany, Austria, Switzerland...)
    Posts
    1,526
    Thanks
    22
    Thanked 588 Times in 476 Posts


    My Twitter My LinkedIn
    Thank you.

  13. #9
    Axure Fu Master
    Join Date
    Jan 2012
    Location
    Tel Aviv, Israel
    Posts
    111
    Thanks
    37
    Thanked 39 Times in 20 Posts


    My LinkedIn

    Winning!

    Hi Gregor,
    I only just now got a chance to look deeply into the rp file, and it's simply brilliant!


    It took me quite a while to figure out what you did.. nicely done! I love the fact that its completely generic, so I can change the size / location / formatting and nothing breaks.

    Thank you very much for accepting the challenge, and winning it

    Some afterthoughts I had:

    - One of the inevitable shortcomings of the repeater widget is that it makes the interactions *MUCH* more complicated, it really required an effort to figure out what you did. I wish that Axure will add a "function" widget and make our life a little easier than tweaking dynamic panels. I think the repeater complexity demands it.

    - I also wish there would be an option to directly trigger a specific repeater item. I love the trick you did with the internal dynamic panel trigger! I'm gonna use this one a lot

    - Also, I would like to see an OnInit and OnFinish events for the repeater, so we could make updated to global variables there, and keep all the repeater functionality in one place, and not spread across and "hidden" in external dynamic panels.
    [I created a feature request for this here, and when I wanted to link it now I saw you already replied on it, lol ]


    Thanks again!! I learned a bunch of new tricks, that I'm sure will be useful in the future

    And just for the lols -
    CHARLIE SHEEN - WINNING - YouTube

  14. #10
    Sifu
    Join Date
    Aug 2013
    Location
    Europe (Germany, Austria, Switzerland...)
    Posts
    1,526
    Thanks
    22
    Thanked 588 Times in 476 Posts


    My Twitter My LinkedIn
    Thanks, was fun to do this one. I think by now I know quite a lot about the repeater widget.

  15. The Following User Says Thank You to Gregor For This Useful Post:

    susieh (10-15-2013)

  16. #11
    Newbie Level
    Join Date
    Nov 2013
    Location
    France
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts


    hello Guys,

    I really like this drag & drop, it is exactly what I want to do. But I only have the 6.5 version and I cannot open it.
    May I ask you to share a 6.5 version of this rp?
    Or do you know a way to do the same kind of effect on a 6.5 version?
    Thanks a lot!

  17. #12
    Sifu
    Join Date
    Aug 2013
    Location
    Europe (Germany, Austria, Switzerland...)
    Posts
    1,526
    Thanks
    22
    Thanked 588 Times in 476 Posts


    My Twitter My LinkedIn
    Hi,
    this file can not be exported as an axure 6.5 file. the basic functionality could be rebuild in axure 6.5. but will be much harder to maintain the contents because the basic widget, the repeater widget, is not available in axure 6.5.

    sorry, no help from here.

  18. The Following User Says Thank You to Gregor For This Useful Post:

    benlevin (12-03-2013)

  19. #13
    Newbie Level
    Join Date
    Apr 2012
    Location
    United States
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts


    My Twitter My LinkedIn
    Gregor,

    Thanks for this! I didn't actually use this example exactly, but seeing it in action sparked an idea for another problem I was trying to solve. Thanks for the inspiration!

    -Ben

  20. #14
    Apprentice Level
    Join Date
    Sep 2013
    Location
    Sydney
    Posts
    31
    Thanks
    10
    Thanked 5 Times in 3 Posts


    Gregor,

    Pardon my ignorance, but I noticed in your RP file, in the Widget Interaction screen, you have events that I don't have in my version, eg
    OnDrag, OnDragDrop, OnSwipeLeft, etc..
    (I'm using Axure 7 Beta)

    Are these custom events that you built? If yes, could you point me to some resources to do this?
    If no, could you let me know how I could get these custom events as well?

    Thanks,
    Ling

  21. #15
    Sifu
    Join Date
    Aug 2013
    Location
    Europe (Germany, Austria, Switzerland...)
    Posts
    1,526
    Thanks
    22
    Thanked 588 Times in 476 Posts


    My Twitter My LinkedIn
    Click More Events in the Dropdown-Menue there you will find These events

  22. #16
    Apprentice Level
    Join Date
    Sep 2013
    Location
    Sydney
    Posts
    31
    Thanks
    10
    Thanked 5 Times in 3 Posts


    Hmmm... I did that, but it's still not there.

    I tried it on the same repeater widget you were using (just in case it's widget-specific), but still no luck.

    Just to confirm, are you refering to the "More events" menu as highlighted in the image?
    Name:  5-12-2013 9-01-40 AM.png
Views: 8141
Size:  10.3 KB

  23. #17
    Apprentice Level
    Join Date
    Sep 2013
    Location
    Sydney
    Posts
    31
    Thanks
    10
    Thanked 5 Times in 3 Posts


    Found the problem... It has to be a dynamic panel!
    Sorry to waste your time Gregor!

  24. #18
    Newbie Level
    Join Date
    May 2012
    Location
    Portland, OR
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts


    Hello. I'd love to take a look at the .rp file for this interaction, but I'm not seeing the link to the source file. Any help is much appreciated.

  25. #19
    Axure Support/Admin
    Join Date
    Jul 2011
    Location
    San Diego, CA
    Posts
    1,668
    Thanks
    264
    Thanked 622 Times in 307 Posts


    Here it is, thanks Gregor.
    Attached Files Attached Files

  26. The Following 2 Users Say Thank You to Paul Axure For This Useful Post:

    alexbohariuc (11-12-2015), AutumnBeth (02-25-2015)

  27. #20
    Newbie Level
    Join Date
    May 2012
    Location
    Portland, OR
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts


    Thank you both. It's amazing how responsive these forums are.

  28. #21
    Newbie Level
    Join Date
    Jan 2014
    Location
    United States
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts


    This answers a question I posted yesterday - thank you!

  29. #22
    Sifu
    Join Date
    Aug 2013
    Location
    Europe (Germany, Austria, Switzerland...)
    Posts
    1,526
    Thanks
    22
    Thanked 588 Times in 476 Posts


    My Twitter My LinkedIn
    I know.

  30. #23
    Newbie Level
    Join Date
    Mar 2012
    Location
    Warsaw
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts


    My Twitter

    And to make things a little bit more difficult...

    Quote Originally Posted by Gregor View Post
    I know.
    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.

  31. #24
    Sifu
    Join Date
    Aug 2013
    Location
    Europe (Germany, Austria, Switzerland...)
    Posts
    1,526
    Thanks
    22
    Thanked 588 Times in 476 Posts


    My Twitter My LinkedIn
    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.

  32. #25
    Newbie Level
    Join Date
    Feb 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts


    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.
    Attached Files Attached Files
    Last edited by fongsun; 02-28-2014 at 03:41 PM. Reason: attaching my RP file

  33. #26
    Sifu
    Join Date
    Aug 2013
    Location
    Europe (Germany, Austria, Switzerland...)
    Posts
    1,526
    Thanks
    22
    Thanked 588 Times in 476 Posts


    My Twitter My LinkedIn
    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.
    Last edited by Gregor; 03-01-2014 at 06:19 AM.

  34. #27
    Newbie Level
    Join Date
    Feb 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts


    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.

  35. #28
    Newbie Level
    Join Date
    May 2014
    Location
    Costa Rica
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts


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

  36. #29
    Sifu
    Join Date
    Aug 2013
    Location
    Europe (Germany, Austria, Switzerland...)
    Posts
    1,526
    Thanks
    22
    Thanked 588 Times in 476 Posts


    My Twitter My LinkedIn
    your welcome.

  37. #30
    Newbie Level
    Join Date
    May 2014
    Location
    Costa Rica
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts


    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!
    Last edited by mgnta; 05-16-2014 at 03:32 PM.

  38. #31
    Sifu
    Join Date
    Aug 2013
    Location
    Europe (Germany, Austria, Switzerland...)
    Posts
    1,526
    Thanks
    22
    Thanked 588 Times in 476 Posts


    My Twitter My LinkedIn
    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.

  39. #32
    Apprentice Level
    Join Date
    Sep 2013
    Location
    Austin, TX
    Posts
    35
    Thanks
    9
    Thanked 1 Time in 1 Post


    Quote Originally Posted by ojacie View Post
    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.
    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?

  40. #33
    Newbie Level
    Join Date
    Sep 2014
    Location
    Poland
    Posts
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts


    Gregor, your solution is brilliant!
    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!
    Last edited by Decimus; 09-25-2014 at 07:40 AM.

  41. #34
    Sifu
    Join Date
    Aug 2013
    Location
    Europe (Germany, Austria, Switzerland...)
    Posts
    1,526
    Thanks
    22
    Thanked 588 Times in 476 Posts


    My Twitter My LinkedIn
    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.

  42. The Following User Says Thank You to Gregor For This Useful Post:

    Decimus (09-26-2014)

  43. #35
    Axure Fu Master
    Join Date
    Apr 2012
    Location
    Studio City, CA
    Posts
    199
    Thanks
    18
    Thanked 27 Times in 25 Posts


    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?

  44. #36
    Sifu
    Join Date
    Aug 2013
    Location
    Europe (Germany, Austria, Switzerland...)
    Posts
    1,526
    Thanks
    22
    Thanked 588 Times in 476 Posts


    My Twitter My LinkedIn
    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.
    Attached Files Attached Files
    Last edited by Gregor; 10-23-2014 at 12:50 PM.

  45. The Following User Says Thank You to Gregor For This Useful Post:

    niki_h (10-23-2014)

  46. #37
    Axure Fu Master
    Join Date
    Apr 2012
    Location
    Studio City, CA
    Posts
    199
    Thanks
    18
    Thanked 27 Times in 25 Posts


    Amazing, thank you!

  47. #38
    Sifu
    Join Date
    Aug 2013
    Location
    Europe (Germany, Austria, Switzerland...)
    Posts
    1,526
    Thanks
    22
    Thanked 588 Times in 476 Posts


    My Twitter My LinkedIn
    your welcome

  48. #39
    Axure Fu Master
    Join Date
    Apr 2012
    Location
    Studio City, CA
    Posts
    199
    Thanks
    18
    Thanked 27 Times in 25 Posts


    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?

  49. #40
    Sifu
    Join Date
    Aug 2013
    Location
    Europe (Germany, Austria, Switzerland...)
    Posts
    1,526
    Thanks
    22
    Thanked 588 Times in 476 Posts


    My Twitter My LinkedIn
    you can reduce the size of the rectangles to 1,1 and hide them, I made it visible to make it easier to understand the proceed. keep in mind, that it is always the dynamic panel that is moved. place all your repeater.item stuff in this wrapper.

  50. #41
    Axure Fu Master
    Join Date
    Apr 2012
    Location
    Studio City, CA
    Posts
    199
    Thanks
    18
    Thanked 27 Times in 25 Posts


    Ahhh, got it, thanks!

  51. #42
    Apprentice Level
    Join Date
    Nov 2013
    Location
    Belgium
    Posts
    43
    Thanks
    5
    Thanked 0 Times in 0 Posts


    Hello everybody,
    Perhaps a stupid question but can this also be simulated using an up and down arrow with click function?
    Regards

  52. #43
    Sifu
    Join Date
    Aug 2013
    Location
    Europe (Germany, Austria, Switzerland...)
    Posts
    1,526
    Thanks
    22
    Thanked 588 Times in 476 Posts


    My Twitter My LinkedIn
    If You want an up- down Click i would not go with this approach. Not losing the drag is the reason for not redrawing the repeater.
    On click.... Individual index column and adding a sort... Hmmm still need a feedback from other repeater items to calculate the right individual index.

    On a high level proceed of this example may be useful.

    On the other side. If redrawing the repeater is not necessary you can also use the exact example and copy the cases causing the switch to a onClick event.

  53. #44
    Apprentice Level
    Join Date
    Nov 2013
    Location
    Belgium
    Posts
    43
    Thanks
    5
    Thanked 0 Times in 0 Posts


    Hi Gregor,

    What do I do with the move "this" with drag and the onClick event in case I go for the high level example?
    Move to x: ? y: ?

  54. #45
    Apprentice Level
    Join Date
    Sep 2013
    Location
    United Kingdom
    Posts
    75
    Thanks
    13
    Thanked 1 Time in 1 Post


    All amazing stuff here, thanks @Gregor.

    I have an additional question. Is it possible to use multiple dynamic panels within the repeater?

    I have 4 widgets that I need to re-order, however, each one of these has a widget in it that can have a specific state (for simplicities sake, let's say a toggle button with 2 states) that differs from one panel to another.

    Is there a way to put each one of these panels in to the repeater? Currently if I put more than 1 in, then only the first one is shown (which I guess is the standard operation of the repeater). Is there a way to use a different state based on the index in the repeater?

  55. #46
    Sifu
    Join Date
    Aug 2013
    Location
    Europe (Germany, Austria, Switzerland...)
    Posts
    1,526
    Thanks
    22
    Thanked 588 Times in 476 Posts


    My Twitter My LinkedIn
    unless you try to have different dimensions per repeater.item a big yes.
    this sorting is based on the guess that all items have the same size, if this rule is broken the width causing the swap is no longer the drag element but the drop targets on the other sides... or up and down, depending on the orientation. would be fun to build it but the current solution would not support this.

  56. #47
    Sifu
    Join Date
    Aug 2013
    Location
    Europe (Germany, Austria, Switzerland...)
    Posts
    1,526
    Thanks
    22
    Thanked 588 Times in 476 Posts


    My Twitter My LinkedIn
    resort on click....
    Attached Files Attached Files

  57. #48
    Newbie Level
    Join Date
    Apr 2015
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts


    Hi,

    I love this reorderable repeater widget, but it doesn't play nicely with the other widgets in my project.

    The reordering works fine on a page by itself. The functionality breaks down as soon as I introduce other widgets with dynamic panels or masters.

    I've spent so much time troubleshooting it, and I can't figure out how to fix it. Has anyone else had this issue?

  58. #49
    Sifu
    Join Date
    Jul 2013
    Location
    Chicago, IL, U.S.
    Posts
    2,106
    Thanks
    43
    Thanked 568 Times in 523 Posts


    Quote Originally Posted by Shadowfax View Post
    Hi,

    I love this reorderable repeater widget, but it doesn't play nicely with the other widgets in my project.

    The reordering works fine on a page by itself. The functionality breaks down as soon as I introduce other widgets with dynamic panels or masters.

    I've spent so much time troubleshooting it, and I can't figure out how to fix it. Has anyone else had this issue?
    Can you share the file that isn't working? If it contains sensitive content, can you strip that out or replicate the issue in a sanitized document? I've tried adding widgets and such to Gregor's file and it all works fine. Besides, simply adding widgets shouldn't break it.

    Did you accidentally delete the helper widgets associated with each example (named 'listenAndTell')?

  59. #50
    Apprentice Level
    Join Date
    Aug 2015
    Posts
    22
    Thanks
    7
    Thanked 0 Times in 0 Posts


    Hi Gregor,

    thanks so much for this great file. It does exactly what I need to do, but I have a very silly problem: I edited it with my content but when I copy paste it into my prototype it isn't working. I can still drag the fields but the drop doesn't work - they go all over the place.

    Anyone knows what I am doing wrong?

    Thanks,
    Kat

  60. #51
    Axure Support/Admin
    Join Date
    Sep 2014
    Location
    San Diego, CA
    Posts
    1,738
    Thanks
    77
    Thanked 320 Times in 291 Posts


    Hello hellokat

    It looks like Gregor posted several files during the course of this thread. Which one were you copying and pasting the example from? If you're still having the same problem now, you can post your file here so that we can help you figure out what's going wrong. If you'd rather keep it private, please send it to support@axure.com so that we can take a look for you.

  61. #52
    Apprentice Level
    Join Date
    Sep 2009
    Location
    London and Suffolk
    Posts
    20
    Thanks
    3
    Thanked 2 Times in 1 Post


    My LinkedIn
    very nice axure skills
    Last edited by oozability; 10-07-2015 at 07:56 AM.

  62. #53
    Apprentice Level
    Join Date
    Jan 2016
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts


    Hey Gregor!

    Awesome!
    I'm still a newbie at Axure, so I got some questions. I hope you can help me.

    First: How can I edit the style of the text? I edited the style in the rich text editor, but nothing happens. I want to change the alignment, font and size.

    Second: How can I constrain the movement? I don't want to allow the drag by x, but only by y. So the element should only move by y, but not by x with the mouse.

    Third: I got other dynamic panels besides the repeater widget, that should move with the repeater. I.e. I got some project gantts that belongs to the project name (represented by repeater). Is a movement of a dynamic panel of the repeater, the corresponding project visualization has to move, as well.
    For better visualization take a look at my screenshot.

    Thanks in advance!
    Name:  Unbenannt.PNG
Views: 4914
Size:  18.3 KB

  63. #54
    Sifu
    Join Date
    Aug 2013
    Location
    Europe (Germany, Austria, Switzerland...)
    Posts
    1,526
    Thanks
    22
    Thanked 588 Times in 476 Posts


    My Twitter My LinkedIn
    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.

  64. #55
    Apprentice Level
    Join Date
    Jan 2016
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts


    Thanks, Gregor! I'll try your ideals, especially the third one.

  65. #56
    Newbie Level
    Join Date
    Feb 2016
    Location
    Seattle
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts


    My LinkedIn

    Edit each field

    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
    Attached Images Attached Images  

  66. #57
    Axure Support/Admin
    Join Date
    Oct 2015
    Location
    San Diego, CA
    Posts
    707
    Thanks
    10
    Thanked 133 Times in 125 Posts


    Hi eunicedo,

    Welcome to the Forums!

    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!

  67. #58
    Newbie Level
    Join Date
    Aug 2015
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts


    Hi Gregor., Can you please help me on this Horizontal Drag and Drop + Reorder

  68. #59
    Newbie Level
    Join Date
    Jun 2016
    Location
    Haarlem, Netherlands
    Posts
    6
    Thanks
    2
    Thanked 1 Time in 1 Post


    My Twitter My LinkedIn
    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

  69. #60
    Sifu
    Join Date
    Aug 2013
    Location
    Europe (Germany, Austria, Switzerland...)
    Posts
    1,526
    Thanks
    22
    Thanked 588 Times in 476 Posts


    My Twitter My LinkedIn
    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.

  70. The Following User Says Thank You to Gregor For This Useful Post:

    RyanH (09-30-2016)

  71. #61
    Newbie Level
    Join Date
    Jul 2016
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts


    Help needed when rows are removed / added

    Quote Originally Posted by Gregor View Post
    Here is the rp

    I calculate the item height, it should be easy to edit.
    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
    Attached Files Attached Files

  72. #62
    Sifu
    Join Date
    Aug 2013
    Location
    Europe (Germany, Austria, Switzerland...)
    Posts
    1,526
    Thanks
    22
    Thanked 588 Times in 476 Posts


    My Twitter My LinkedIn
    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.

  73. #63
    Newbie Level
    Join Date
    Jul 2016
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts


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

  74. #64
    Apprentice Level
    Join Date
    Dec 2014
    Location
    Huntington Beach, CA
    Posts
    84
    Thanks
    0
    Thanked 25 Times in 14 Posts


    My LinkedIn
    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

  75. #65
    Newbie Level
    Join Date
    Aug 2016
    Location
    SE
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts


    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?

  76. #66
    Sifu
    Join Date
    Aug 2013
    Location
    Europe (Germany, Austria, Switzerland...)
    Posts
    1,526
    Thanks
    22
    Thanked 588 Times in 476 Posts


    My Twitter My LinkedIn
    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.

  77. #67
    Newbie Level
    Join Date
    Jan 2017
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts


    My Twitter
    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!

Similar Threads

  1. [Feature Request]: Repeater Drag and Drop Reordering
    By andymerskin in forum 7.0 Feature Requests
    Replies: 2
    Last Post: 10-20-2015, 02:28 PM
  2. Drag & Drop with Repeater
    By Shiraluk in forum Repeater Widget
    Replies: 2
    Last Post: 12-03-2014, 02:54 AM
  3. Drag and Drop List Sorting (aka Netflix Queue)
    By JoelCran4d in forum 6.x Archived Discussions
    Replies: 3
    Last Post: 12-10-2013, 11:04 AM
  4. dp with drag how implement in textfield on focus lost event?
    By mantas in forum Mobile Prototyping
    Replies: 1
    Last Post: 11-19-2012, 10:43 PM
  5. (Answered) Drag Drop Table Cell Rows or Columns to reorder
    By Paul Axure in forum 6.x Archived Discussions
    Replies: 1
    Last Post: 09-15-2011, 12:51 PM

Search Engine Friendly URLs by vBSEO 3.6.0 PL2