Snappable

Moveable. Snappable

Source:
Whether or not target can be snapped to the guideline. (default: false)

Members

verticalGuidelines

Source:
See:
Add guidelines in the vertical direction. (default: [])
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.verticalGuidelines = [100, 200, 500];

snapThreshold

Source:
See:
Distance value that can snap to guidelines. (default: 5)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.snapThreshold = 5;

snappable

Source:
See:
Whether or not target can be snapped to the guideline. (default: false)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.snappable = true;

snapGridWidth

Source:
See:
If width size is greater than 0, you can vertical snap to the grid. (default: 0)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.snapGridWidth = 5;

snapGridHeight

Source:
See:
If height size is greater than 0, you can horizontal snap to the grid. (default: 0)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.snapGridHeight = 5;

snapGap

Source:
See:
When you drag, make the gap snap in the element guidelines. (default: true)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
  snappable: true,
  snapElement: true,
  snapGap: true,
});

moveable.snapGap = false;

snapDistFormat

Source:
See:
You can set the text format of the distance shown in the guidelines. (default: self)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
 snappable: true,
 snapDistFormat: (v, type) => v,
});
moveable.snapDistFormat = (v, type) => `${v}px`;

snapDirections

Source:
See:
You can specify the directions to snap to the target. (default: { left: true, top: true, right: true, bottom: true })
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
  snappable: true,
  snapDirections: true,
});
// snap center
moveable.snapDirections = { left: true, top: true, right: true, bottom: true, center: true, middle: true };

snapDigit

Source:
See:
snap distance digits (default: 0)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.snapDigit = 0

snapContainer

Source:
See:
A snap container that is the basis for snap, bounds, and innerBounds. (default: null = container)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.querySelector(".container"));

moveable.snapContainer = document.body;

isDisplaySnapDigit

Source:
See:
Whether to show snap distance (default: true)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.isDisplaySnapDigit = true;

isDisplayInnerSnapDigit

Source:
See:
Whether to show element inner snap distance (default: false)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.isDisplayInnerSnapDigit = true;

innerBounds

Source:
Default Value:
  • null
See:
You can set up inner boundaries.
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.innerBounds = { left: 500, top: 500, width: 100, height: 100};

horizontalGuidelines

Source:
See:
Add guidelines in the horizontal direction. (default: [])
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.horizontalGuidelines = [100, 200, 500];

elementSnapDirections

Source:
See:
You can specify the snap directions of elements. (default: { left: true, ftrue, right: true, bottom: true })
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
  snappable: true,
  elementSnapDirections: true,
});
// snap center
moveable.elementSnapDirections = { left: true, top: true, right: true, bottom: true, center: true, middle: true };

elementGuidelines

Source:
See:
Add guidelines for the element. (default: [])
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.elementGuidelines = [
  document.querySelector(".element"),
];

bounds

Source:
Default Value:
  • null
See:
You can set up boundaries.
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

moveable.bounds = { left: 0, right: 1000, top: 0, bottom: 1000};

Type Definitions

BoundType

Source:
Properties:
position optional
Default Value: "client"
position?: "client" | "css"
If position is css, right and bottom are calculated as css right and css bottom of container.
left optional
left?: number
top optional
top?: number
right optional
right?: number
bottom optional
bottom?: number
Type:
  • TSInterface

ElementGuidelineValue

Source:
Properties:
left optional
Default Value: true
left?: boolean
Whether to snap the top of the element
top optional
Default Value: true
top?: boolean
Whether to snap the left of the element
right optional
Default Value: true
right?: boolean
Whether to snap the right of the element
bottom optional
Default Value: true
bottom?: boolean
Whether to snap the bottom of the element
center optional
Default Value: false
center?: boolean
Whether to snap the center((left + right) / 2) of the element
middle optional
Default Value: false
middle?: boolean
Whether to snap the middle((top + bottom) / 2) of the element
element
element: Element
guideline element
className optional
Default Value: ""
className?: string
class names to add to guideline
Examples 
```css
.moveable-gap.red {
  background: red!important;
}
```
```css
.moveable-bold.red {
  background: red!important;
}
```
```css
.moveable-dashed.red {
  border-top-color: red!important;
}
```
refresh optional
Default Value: false
refresh?: boolean
Whether to update the element size at every render
Type:
  • TSInterface

ElementGuidelineValue

Source:
Properties:
left optional
Default Value: true
left?: boolean
Whether to snap the top of the element
top optional
Default Value: true
top?: boolean
Whether to snap the left of the element
right optional
Default Value: true
right?: boolean
Whether to snap the right of the element
bottom optional
Default Value: true
bottom?: boolean
Whether to snap the bottom of the element
center optional
Default Value: false
center?: boolean
Whether to snap the center((left + right) / 2) of the element
middle optional
Default Value: false
middle?: boolean
Whether to snap the middle((top + bottom) / 2) of the element
element
element: Element
guideline element
className optional
Default Value: ""
className?: string
class names to add to guideline
refresh optional
Default Value: false
refresh?: boolean
Whether to update the element size at every render
Type:
  • TSInterface

ElementGuidelineValueOption

Source:
Properties:
left optional
Default Value: true
left?: boolean
Whether to snap the top of the element
top optional
Default Value: true
top?: boolean
Whether to snap the left of the element
right optional
Default Value: true
right?: boolean
Whether to snap the right of the element
bottom optional
Default Value: true
bottom?: boolean
Whether to snap the bottom of the element
center optional
Default Value: false
center?: boolean
Whether to snap the center((left + right) / 2) of the element
middle optional
Default Value: false
middle?: boolean
Whether to snap the middle((top + bottom) / 2) of the element
element
element: MoveableRefType<Element>
guideline element
className optional
Default Value: ""
className?: string
class names to add to guideline
refresh optional
Default Value: false
refresh?: boolean
Whether to update the element size at every render
Type:
  • TSInterface

GapGuideline

Source:
Properties:
renderPos
renderPos: number[]
inner optional
inner?: boolean
Type:
  • TSInterface

InnerBoundType

Source:
Properties:
left
left: number
top
top: number
width
width: number
height
height: number
Type:
  • TSInterface

NumericPosGuideline

Source:
Properties:
pos
pos: number
Type:
  • TSInterface

OnBound

Source:
Properties:
bounds
bounds: {left: boolean, top: boolean, right: boolean, bottom: boolean}
innerBounds
innerBounds: {left: boolean, top: boolean, right: boolean, bottom: boolean}
Type:
  • TSInterface

OnSnap

Source:
Properties:
guidelines
guidelines: SnapGuideline[]
snapped verticalGuidelines, horizontalGuidelines,
elements
elements: SnapGuideline[]
snapped elements (group by element)
gaps
gaps: SnapGuideline[]
gaps is snapped guidelines that became gap snap between elements.
Type:
  • TSInterface

PosGuideline

Source:
Properties:
pos
pos: number | string
guideline pos
className optional
Default Value: ""
className?: string
class names to add to guideline
Type:
  • TSInterface

RenderGuidelineInfo

Source:
Properties:
key optional
key?: string
direction
direction: string
classNames
classNames: string[]
size
size: string
pos
pos: string[]
sizeValue
sizeValue: number
posValue
posValue: number[]
zoom
zoom: number
Type:
  • TSInterface

SnapDirections

Source:
Properties:
left optional
Default Value: true
left?: boolean
Whether to snap the top of the element
top optional
Default Value: true
top?: boolean
Whether to snap the left of the element
right optional
Default Value: true
right?: boolean
Whether to snap the right of the element
bottom optional
Default Value: true
bottom?: boolean
Whether to snap the bottom of the element
center optional
Default Value: false
center?: boolean
Whether to snap the center((left + right) / 2) of the element
middle optional
Default Value: false
middle?: boolean
Whether to snap the middle((top + bottom) / 2) of the element
Type:
  • TSInterface

SnapElementGuideline

Source:
Type:
  • TSInterface

SnapGuideline

Source:
Properties:
type
type: "horizontal" | "vertical"
direction
direction: string
hide optional
hide?: boolean
element optional
element?: Element | null
isStart optional
isStart?: boolean
isEnd optional
isEnd?: boolean
isCenter optional
isCenter?: boolean
isInner optional
isInner?: boolean
grid optional
grid?: boolean
pos
pos: number[]
size
size: number
className optional
className?: string
sizes optional
sizes?: number[]
gap optional
gap?: number
elementDirection optional
elementDirection?: string
elementRect optional
elementRect?: SnapElementRect
gapRects optional
gapRects?: SnapElementRect[]
Type:
  • TSInterface

SnappableOptions

Source:
Properties:
snappable optional
Default Value: false
snappable?: boolean | string[]
Whether or not target can be snapped to the guideline.
snapContainer optional
Default Value: null
snapContainer?: MoveableRefType<HTMLElement | SVGElement>
A snap container that is the basis for snap, bounds, and innerBounds.
snapDirections optional
Default Value: true (true is all directions)
snapDirections?: boolean | SnapDirections
You can specify the directions to snap to the target.
elementSnapDirections optional
Default Value: true (true is all directions)
elementSnapDirections?: boolean | SnapDirections
You can specify the snap directions of elements.
snapGap optional
Default Value: true
snapGap?: boolean
When you drag, make the gap snap in the element guidelines.
snapThreshold optional
Default Value: 0
snapThreshold?: number
/** Distance value that can snap to guidelines. Use `snapHorizontalThreshold` and `snapVerticalThreshold`
snapHorizontalThreshold optional
Default Value: 5
snapHorizontalThreshold?: number
Distance horizontal between horizontal value that can snap to guidelines.
snapVerticalThreshold optional
Default Value: 5
snapVerticalThreshold?: number
Distance Horizontal value that can snap to guidelines.
snapRenderThreshold optional
Default Value: 1
snapRenderThreshold?: number
Distance value that render snapped guidelines.
snapDigit optional
Default Value: 0
snapDigit?: number
snap distance digits.
isDisplayGridGuidelines optional
Default Value: false
isDisplayGridGuidelines?: boolean
Whether to show guideline of snap by grid
snapRotationThreshold optional
Default Value: 5
snapRotationThreshold?: number
Snap works if `abs(current rotation - snapRotationDegrees) < snapRotationThreshold`.
snapRotationDegrees optional
Default Value: []
snapRotationDegrees?: number[]
degree angles to snap to rotation
snapGridWidth optional
Default Value: 0 (0 is not used)
snapGridWidth?: number
If width size is greater than 0, you can vertical snap to the grid.
snapGridHeight optional
Default Value: 0 (0 is not used)
snapGridHeight?: number
If height size is greater than 0, you can horizontal snap to the grid.
snapGridAll optional
Default Value: false
snapGridAll?: boolean
In the case of a group, if `snapGridWidth` and `snapGridHeight` are used, all children can be snapped. Custom fixed directions are not yet allowed. Also, it cannot be applied if rotated.
isDisplaySnapDigit optional
Default Value: true
isDisplaySnapDigit?: boolean
Whether to show snap distance.
isDisplayInnerSnapDigit optional
Default Value: false
isDisplayInnerSnapDigit?: boolean
Whether to show element inner snap distance
horizontalGuidelines optional
Default Value: []
horizontalGuidelines?: Array<PosGuideline | number | string>
Add guidelines in the horizontal direction.
verticalGuidelines optional
Default Value: []
verticalGuidelines?: Array<PosGuideline | number | string>
Add guidelines in the vertical direction.
elementGuidelines optional
Default Value: []
elementGuidelines?: Array<ElementGuidelineValueOption | MoveableRefType<Element>>
Add guidelines for the element.
maxSnapElementGuidelineDistance optional
Default Value: Infinity
maxSnapElementGuidelineDistance?: number
Maximum distance to which element guidelines can be snapped.
maxSnapElementGapDistance optional
Default Value: Infinity
maxSnapElementGapDistance?: number
Maximum distance to which element gap guidelines can be snapped.
bounds optional
Default Value: null
bounds?: BoundType | null
You can set up boundaries.
innerBounds optional
Default Value: null
innerBounds?: InnerBoundType | null
You can set up inner boundaries.
snapDistFormat optional
Default Value: oneself
snapDistFormat?: (distance: number, type: "vertical" | "horizontal") => number | string
You can set the text format of the distance shown in the guidelines.
Type:
  • TSInterface

Events

snap

Source:
When you drag or dragControl, the `snap` event is called.
Type Description
Moveable.Snappable.OnSnap Parameters for the `snap` event
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    snappable: true
});
moveable.on("snap", e => {
    console.log("onSnap", e);
});