Global

Methods

getMoveables() → {MoveableManagerInterface[]}

Source:
moveable is the top level that manages targets `Single`: MoveableManager instance `Group`: MoveableGroup instance `IndividualGroup`: MoveableIndividaulGroup instance Returns leaf target MoveableManagers.
Returns:
Type
MoveableManagerInterface[]

Type Definitions

MoveableDefaultOptions

Source:
Properties:
padding optional
Default Value: null
padding?: PaddingBox | number
Add padding around the target to increase the drag area.
origin optional
Default Value: true
origin?: boolean
Whether or not the origin control box will be visible or not.
svgOrigin optional
Since: 0.47.0
Default Value: ""
svgOrigin?: string
Sets the transform origin based on the svg target. If not set, it is set as the transform origin based on the owner of svg.
dragArea optional
Default Value: if group, true, else fals
dragArea?: boolean
Instead of firing an event on the target, we add it to the moveable control element. You can use click and clickGroup events.
passDragArea optional
Default Value: false
passDragArea?: boolean
Set `pointerEvents: none;` css to pass events in dragArea.
target optional
Default Value: null
target?: SVGElement | HTMLElement | null
The target(s) to indicate Moveable Control Box.
dragTarget optional
Default Value: target
dragTarget?: MoveableRefType | null
The external target(s) to drag Moveable target(s)
dragTargetSelf optional
Default Value: false
dragTargetSelf?: boolean
If dragTarget is set directly, taget itself cannot be dragged. Whether to drag the target as well.
dragContainer optional
Default Value: window
dragContainer?: null | Window | MoveableRefType<HTMLElement>
Container area where drag works
container optional
Default Value: parentElement
container?: SVGElement | HTMLElement | null
A container into which Moveables are inserted. Set it only when used within the slot of Web Components or when the container is different.
rootContainer optional
Story Example: options--options-root-container
Default Value: parentElement
rootContainer?: MoveableRefType<HTMLElement>
Moveable Root Container (No Transformed Container)
viewContainer optional
Story Example: options--options-view-container
Default Value: null
viewContainer?: MoveableRefType<HTMLElement>
If you want to set the dragging information to the viewer, refer to the following.
useResizeObserver optional
Story Example: options--options-resize-observer
Default Value: false
useResizeObserver?: boolean
Whether the target size is detected and updated whenever it changes. It is more effective when used together with `useMutationObserver`.
useMutationObserver optional
Story Example: options--options-mutation-observer
Default Value: false
useMutationObserver?: boolean
Whether the target size, pos in inline style is detected and updated whenever it changes. It is more effective when used together with `useResizeObserver`.
zoom optional
Default Value: 1
zoom?: number
Zooms in the elements of a moveable.
transformOrigin optional
Default Value: ""
transformOrigin?: Array<string | number> | string | ""
The default transformOrigin of the target can be set in advance.
ables optional
Default Value: []
ables?: Able[]
You can add your custom able.
className optional
Default Value: ""
className?: string
You can specify the className of the moveable controlbox.
pinchThreshold optional
Default Value: 20
pinchThreshold?: number
Minimum distance to pinch.
pinchOutside optional
Default Value: true
pinchOutside?: boolean
Whether the container containing the target becomes a pinch.
triggerAblesSimultaneously optional
Default Value: false
triggerAblesSimultaneously?: boolean
Lets generate events of ables at the same time. (like Resizable, Scalable)
checkInput optional
Default Value: false
checkInput?: boolean
Checks whether this is an element to input text or contentEditable, and prevents dragging.
cspNonce optional
Default Value: ""
cspNonce?: string
add nonce property to style for CSP.
translateZ optional
Default Value: 50
translateZ?: number | string
You can set the translateZ value of moveable.
hideDefaultLines optional
Default Value: false
hideDefaultLines?: boolean
Whether to hide the line corresponding to the rect of the target.
stopPropagation optional
Default Value: false
stopPropagation?: boolean
Whether to prevent bubbling of events like mousedown, touchstart, etc.
preventDefault optional
Since: 0.44.0
Default Value: true
preventDefault?: boolean
Whether to call preventDefault on touchstart or mousedown
preventRightClick optional
Default Value: true
preventRightClick?: boolean
Whether to prevent dragging using the right mouse button
preventWheelClick optional
Default Value: true
preventWheelClick?: boolean
Whether to prevent dragging using the wheel (middle) mouse button
preventClickEventOnDrag optional
Default Value: true
preventClickEventOnDrag?: boolean
Prevent click event on drag. (mousemove, touchmove)
dragFocusedInput optional
Since: 0.47.0
Story Example: options--options-drag-focused-input
Default Value: false
dragFocusedInput?: boolean
Whether to drag the focused input If `checkInput` is true, this option is not applied.
preventClickDefault optional
Default Value: false
preventClickDefault?: boolean
Prevent click event on dragStart. (mousedown, touchstart)
props optional
Default Value: empty object
props?: Record<string, any>
You can use props in object format or custom props.
persistData optional
Default Value: null
persistData?: PersistRectData | null
Data for first render
useAccuratePosition optional
Default Value: false
useAccuratePosition?: boolean
Whether to accurately show the position of a movable control box Because getBoundingClientRect is used, css zoom, transform: rotate between container and rootContainer cannot be used. group is not supported.
linePadding optional
Since: 0.43.0
Story Example: options--options-line-padding
Default Value: 0
linePadding?: number
By adding padding to the line, you can increase the area of the line that can be clicked and dragged.
controlPadding optional
Since: 0.44.0
Story Example: options--options-control-padding
Default Value: 0
controlPadding?: number
By adding padding to the control, you can increase the area of the control that can be clicked and dragged. Either `rotateAroundControls` or `displayAroundControls` can be used.
flushSync optional
Default Value: empty function
flushSync?: (callback: () => void) => void
If you are using React 18's concurrent mode, use `flushSync` for UI sync.
Examples 
```jsx
import { flushSync } from "react-dom";

<Moveable flushSync={flushSync} />
```
Type:
  • TSInterface