Hi,
I want to make a prototype of this builder.
Please see the video link: https://drive.google.com/file/d/1aWC1Lxfkkn8vnIaZGj_7Em3kJPOWBj0r/view?usp=sharing
I having a problem with the drag n drop that after I drag the icon/element in the canvass(any place). The icon should still stay on it’s original position and a icon copy is on the canvass. It’s like a page builder.
Here’s my rp file(I have the example test 1 and test 2 icons, it’s on the “create page”) :
userengage.rp (210.7 KB)
I get why on the surface this seems like a newbie question, but what you’re looking to do is actually rather complex. Unless of course i’m missing some easy solution 
So here’s a start. It utilizes a repeater and an “absolute positioning” trick described here -
Each time you drag an item in, it adds a new item to the repeater. The repeater positions the items based on X,Y coordinates - with offset values that are triggered on mousedown. I.e. if you started by grabbing the left corner vs the bottom right vs dead center. Since i assumed you might want to do more than 1, I also put in a red rectangle. I did these as separate repeaters for performance and also to keep the logic a bit simpler.
userengage_edit.rp (217.2 KB)
@UXProtoTyper
Thank you very much for this help. Yeah this is really difficult and I’m just started learning how to use the AxureRP,
I have haven’t read much about the repeater, but I’ll check about it now.
This is a big help for me now.
One more thing, is it possible that after you drop the item., you can still move it freely in any places on the canvass?
Good Morning @johnfrancis!
Yes - it is possible. I have added the onDrag events to the Dynamic Panels and updated the coordinates on drop. Those events are added to the widgets inside of the repeaters.
userengage_drag after dropping.rp (226.5 KB)
In case it’s helpful, here’s a quick breakdown of how all of this works:
EDIT: Now that i’m done, this isn’t necessarily quick
Circle/Square Drag/Drop Widgets -
onDragStart - set variable values to determine where in the widget the user clicked when the drag was started (MousedownX and MousedownY). You’ll notice i’m setting these values based on the current cursor position in relation to the x,y coordinates of the widget. I’m using the mouse coordinates on drop to tell the repeater where to position the new item. By default it’s going to be the top left corner at those coordinates, so i’m using these variables to make sure that if they grabbed any place besides the top left, the widget is positioned in the right place.
onDrag - move This with Drag - hopefully fairly straightforward, move the widget with the drag
OnDragDrop - Two cases here:
If area of widget is over the area of the Rectangle - Add a row to the corresponding repeater. IF you dig into the add row logic, you’ll notice i’m using the following formulas to set the coordinates:
X:
[[Cursor.x-LVAR1.x - MousedownX]]
y:
[[Cursor.y-LVAR1.y - MousedownY]]
LVAR1 is the Canvas widget. To simplify some logic I left both of the repeaters inside of a dynamic panel. It’s important to remember that dynamic panels have their own set of coordinates. However, the cursor position axure gets is for the overall window. So to position something inside of the dynamic panel based on the window coordinates I need to subtract the x and y of the dynamic panel. For example, position 0,0 in the CanvasDP widget is actually 318, 165 in the window. Finally I subtract the the offset values I recording when the drag started.
Then the second case If True (essentially meaning it always fires):
Move this to x,y before drag. Puts the widget back where it started.
Repeater Elements
Inside of the dynamic panel are two repeater widgets. They start with no rows of data, so even though in RP you see them, they won’t show up in the generated html until rows are added.
OnItemLoad, we move the widgets to the coordinates stored on drop above. I have the repeaters set up to be vertical grids - so the x value is straightforward. However, y is a little tricky. By default a vertical repeater will automatically offset each item by the width of the row. SO when setting the position I need to first “0 out” the y using this logic: -((Item.index - 1) * LVAR1.height) where LVAR1 is the shape being copied. This setts the y coordinate so that it is 0. Then I add in whatever y coordinate was recorded on drop to place the item.
Inside of the repeaters, each has a dynamic panel with the shape. The dynamic panel is set with the following events:
OnDrag - move This with Drag
OnDrop - update the rows with the new coordinates. This is actually pretty straightforward. Take the existing x,y values and add in the TotalDragX and the TotalyDragY respectively. Then update “This” row in the repeater.
Thank your very much and for the quick breakdown! This is really helpful. I’ll study this and apply on my future projects.
Cheers!
Hi,
I’m trying ur method out for my prototype, but somehow in my prototype the ‘copied’ elements are not working like urs.
When I’m adding a new row, the first one will work fine, but the second one, third one …they are moving around (with drag) with the first one or they have like a parallax effect, which means that I can’t move (with drag) a single ‘new generated’ row alone. Somehow another row will move with the one that I want to move.
Do you know how I can fix this?
Thank you in advance.
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
