Skip to content

Commit e8da622

Browse files
Update README.md
1 parent 602136f commit e8da622

File tree

1 file changed

+34
-0
lines changed

1 file changed

+34
-0
lines changed

README.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
* A lightweight, no-dependency
3535
* All props are reactive
3636
* Support touch events
37+
* Snap element to custom grid
3738
* Use draggable, resizable or both
3839
* Define sticks for resizing
3940
* Save aspect ratio for resizable components
@@ -222,6 +223,39 @@ Limits the scope of the component's change to its parent size.
222223
<vue-drag-resize :parentLimitation="true">
223224
```
224225

226+
#### snapToGrid
227+
Type: `Boolean`<br>
228+
Required: `false`<br>
229+
Default: `false`
230+
231+
Determines whether the component should move and resize in predefined steps.
232+
233+
```html
234+
<vue-drag-resize :snapToGrid="true">
235+
```
236+
237+
#### gridX
238+
Type: `Number`<br>
239+
Required: `false`<br>
240+
Default: `50`
241+
242+
Define the grid step size for the horizontal axis. Both sides of the component (left and right) will snap to this step.
243+
244+
```html
245+
<vue-drag-resize :snapToGrid="true" :gridX="20">
246+
```
247+
248+
#### gridY
249+
Type: `Number`<br>
250+
Required: `false`<br>
251+
Default: `50`
252+
253+
Define the grid step size for the vertical axis. Both sides of the component (top and bottom) will snap to this step.
254+
255+
```html
256+
<vue-drag-resize :snapToGrid="true" :gridY="20">
257+
```
258+
225259
#### aspectRatio
226260
Type: `Boolean`<br>
227261
Required: `false`<br>

0 commit comments

Comments
 (0)