Snappable

Moveable. Snappable

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

Members

bounds

Source:
You can set up boundaries. (default: null)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

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

elementGuidelines

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

const moveable = new Moveable(document.body);

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

horizontalGuidelines

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

const moveable = new Moveable(document.body);

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

innerBounds

Source:
You can set up inner boundaries. (default: null)
Example
import Moveable from "moveable";

const moveable = new Moveable(document.body);

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

isDisplayInnerSnapDigit

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

const moveable = new Moveable(document.body);

moveable.isDisplayInnerSnapDigit = true;

isDisplaySnapDigit

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

const moveable = new Moveable(document.body);

moveable.isDisplaySnapDigit = true;

snapCenter

Source:
When you drag, make the snap in the center of the target. (default: false)
Example
import Moveable from "moveable";

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

moveable.snapCenter = true;

snapContainer

Source:
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;

snapDigit

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

const moveable = new Moveable(document.body);

moveable.snapDigit = 0

snapDistFormat

Source:
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 => v,
});
moveable.snapDistFormat = v => `${v}px`;

snapElement

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

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

moveable.snapElement = false;

snapGap

Source:
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,
  snapVertical: true,
  snapHorizontal: true,
  snapElement: true,
  snapGap: true,
});

moveable.snapGap = false;

snapGridHeight

Source:
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;

snapGridWidth

Source:
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;

snapHorizontal

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

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

moveable.snapHorizontal = false;

snappable

Source:
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;

snapThreshold

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

const moveable = new Moveable(document.body);

moveable.snapThreshold = 5;

snapVertical

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

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

moveable.snapVertical = false;

verticalGuidelines

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

const moveable = new Moveable(document.body);

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

Type Definitions

BoundType

Source:
Properties:
Name Type Description
position? "client" | "css" If position is css, right and bottom are calculated as css right and css bottom of container. (default: "client")
left? number
top? number
right? number
bottom? number
Type:
  • TSInterface

ElementGuidelineValue

Source:
Properties:
Name Type Description
element Element guideline element
top? boolean Whether to snap the top of the element (default: true)
left? boolean Whether to snap the left of the element (default: true)
right? boolean Whether to snap the right of the element (default: true)
bottom? boolean Whether to snap the bottom of the element (default: true)
refresh? boolean Whether to update the guideline every render (default: false)
className? string class names to add to guideline (default: "")
Type:
  • TSInterface

GapGuideline

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

InnerBoundType

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

OnSnap

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

RenderGuidelineInfo

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

SnapGuideline

Source:
Properties:
Name Type Description
type "horizontal" | "vertical"
hide? boolean
element? Element | null
center? boolean
pos number[]
size number
className? string
sizes? number[]
gap? number
gapGuidelines? SnapGuideline[]
Type:
  • TSInterface

SnappableOptions

Source:
Properties:
Name Type Description
snappable? boolean | string[] Whether or not target can be snapped to the guideline. (default: false)
snapContainer? MoveableRefType<HTMLElement | SVGElement> A snap container that is the basis for snap, bounds, and innerBounds. (default: null = container)
snapCenter? boolean When you drag, make the snap in the center of the target. (default: false)
snapHorizontal? boolean When you drag, make the snap in the horizontal guidelines. (default: true)
snapVertical? boolean When you drag, make the snap in the vertical guidelines. (default: true)
snapElement? boolean When you drag, make the snap in the element guidelines. (default: true)
snapGap? boolean When you drag, make the gap snap in the element guidelines. (default: true)
snapThreshold? number Distance value that can snap to guidelines. (default: 5)
snapDigit? number If width size is greater than 0, you can vertical snap to the grid. (default: 0)
snapGridWidth? number If height size is greater than 0, you can horizontal snap to the grid. (default: 0)
snapGridHeight? number snap distance digits (default: 0)
isDisplaySnapDigit? boolean Whether to show snap distance (default: true)
isDisplayInnerSnapDigit? boolean Whether to show element inner snap distance (default: false)
horizontalGuidelines? number[] Add guidelines in the horizontal direction. (default: [])
verticalGuidelines? number[] Add guidelines in the vertical direction. (default: [])
elementGuidelines? Array<ElementGuidelineValue | MoveableRefType<Element>> Add guidelines for the element. (default: [])
bounds? BoundType You can set up boundaries. (default: null)
innerBounds? InnerBoundType You can set up inner boundaries. (default: null)
snapDistFormat? (distance: number) => number | string You can set the text format of the distance shown in the guidelines. (default: self)
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);
});