Snapping DPs to grid on drop drag

advanced-prototyping
#1

Snap to grid.jpg1273×949 86.8 KB

Hi,

I’m trying to drag a DP to an area where it needs to snap to a grid of x36, y51. I can partly do it but I’m obviously doing something wrong as its not quite working. See screenshot attached for visual explanation.

I’m using
(if area of This is over DP)
[[ (This.X / 36).toFixed(18) * 36 ]]
[[ (This.Y / 51).toFixed(25.5) * 51 ]]

Using a boundary area. If DP is outside this area it’ll move back to a specific point.

Can anyone help?

Thanks in advance.

Steve

#2

Hi!

You want toFixed() to round off the expressions completely. The parameter to toFixed() specifies the number of decimal points, so you’ll want toFixed(0) in your expressions.

Here’s an example. This DP snaps to every 10 pixels horizontally and every 40 vertically.

drag_snap_to_nearest_xy.rp (51.0 KB)

#3

Thanks for this.

In my scenario its a bit more complicated. I also need to resize each rectangle to the grid and still move it so it snaps to the x36 by y51 grid within a an area.

I’m also mimicking moving DP from one DP into others and potentially back.

If you have an idea how to get all that working as simply as possible, I’ll buy you a drink :smile:

#4

Hi zebrow!

Maybe you could combine josephxbrick example with this one here (resizing of DPs):
https://forum.axure.com/t/resize-shape-by-drag/26373/4

Good luck!
Cheers

#5

Thanks for responding.

I can get the DPs to resize. The challenge is to get them to resize and snap to grid on resize while being able to drag them onto different positions on the grid.

My demo seems to be getting forever more complicated. Maybe it’ll be easy to build the software :slight_smile:

#6

Hi!

I modified the file in this post so that it will snap to grid on resize. It’s set to snap to the nearest 25 horizontally and the nearest 50 vertically. You can change the grid this by changing the “variables” (text labels storing values) in the hidden dynamic panel. It also drags using the same grid.

Live sample

File: resize-with-drag-handles_snap_to_nearest_xy.rp (89.4 KB)

[Edit] It occurs to me that you probably want a minimum size on resize that matches the smallest grid size. You can do this by adding Math.max() to each expression in each drag handle. Example, here is the y resize on the lower-right-corner drag handle:

[[ Math.max( ((startDragY + TotalDragY + This.height - Target.y)/nearestY).toFixed(0) * nearestY, nearestY ) ]]

#7

Hi,

Thanks for that. I’ve incorporated what you’ve done into an example file I’m working with. The results are a little different. See attached.

DragDropTest1.rp (554.8 KB)

#8

Hi zebrow!

It looks like the OnDrag events for your left and right grid handles are missing some local variables for their “Width” value changes:

lvarsunidentified.png1175×530 83.7 KB

Adding the local variables “v_startDragX” and “v_nearestX” should allow the dragging to work correctly for these handles.

I hope this helps!