resize snap to grid relative to dragged edge location

See original GitHub issue

I’m using react-rnd version [7.1.4]

First up, thanks so much for maintaining and developing this component. It has been fantastic and really intuitive to work with 😃

I have an issue that I can’t seem to resolve though: I am rendering rnd components in various locations on my page and have enabled resizing in left and right directions and set them snap to a resizeGrid: [40, 0]. My desired behaviour is that when resizing I want the resize to snap to 40px to the left or right of the resized edge original location, however I’m finding that resizing is snapping to a global grid starting from the edge of the browser window.

So lets say I have an rnd component located with the right edge at 135px from the edge of browser window. When I drag to the right I want the next snap point to be at 135 + 40 = 175px, but instead I am finding that the first snap point is 160px.

Is there a way for resize grid to be relative to the location of the edge being dragged instead of a global grid?

Thanks 😃

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:1
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
bokuwebcommented, Nov 8, 2017

@oldo Sorry. I have not started yet…

1reaction
oldocommented, Oct 18, 2017

Thanks @bokuweb

Let me know if there is anything I can do down my end 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

Snapping - interact.js
The snapEdges modifier snaps the edges of targets when resizing. Its targets have either x and y number props to snap the left/right...
Read more >
Resizing stroke-less objects with snap to grid enabled not ...
Open Inkscape; Open attached document; Select the red rectangle; Click on the arrow in the middle of the lower bounding box and drag...
Read more >
Work with gridlines and use snap-to-grid in PowerPoint
Select View on the ribbon, and in the Show group, select the dialog-box launcher. · To position shapes or objects to the closest...
Read more >
Grid snapping - Unity - Manual
From the Grid and Snap Overlays toolbar, open the grid visibility drop-down menu ( ). · From the Grid Plane section, select the...
Read more >
Fabricjs snap to grid on resize - javascript - Stack Overflow
if you stretch the rectangle to be 3 units wide and 2 units tall and then start dragging the diagonal, the snap to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found