Interface CbnMoveableOptions

extended options for Moveable with custom properties

interface CbnMoveableOptions {
    ables?: Able<IObject<any>, IObject<any>>[];
    bounds?: null | BoundType;
    checkInput?: boolean;
    checkResizableError?: boolean;
    className?: string;
    clickable?: boolean;
    clipArea?: boolean;
    clipHorizontalGuidelines?: (string | number)[];
    clipRelative?: boolean;
    clipSnapThreshold?: number;
    clipTargetBounds?: boolean;
    clipVerticalGuidelines?: (string | number)[];
    clippable?: boolean | ClippableOptions;
    container?: null | HTMLElement | SVGElement;
    controlPadding?: number;
    cspNonce?: string;
    customClipPath?: string;
    defaultClipPath?: string;
    defaultGroupOrigin?: string;
    defaultGroupRotate?: number;
    displayAroundControls?: boolean;
    dragArea?: boolean;
    dragContainer?: Window | MoveableRefType<HTMLElement>;
    dragFocusedInput?: boolean;
    dragTarget?: MoveableRefType<HTMLElement | SVGElement>;
    dragTargetSelf?: boolean;
    dragWithClip?: boolean;
    draggable?: boolean;
    edge?: boolean | LineDirection[];
    edgeDraggable?: boolean | LineDirection[];
    elementGuidelines?: (ElementGuidelineValueOption | MoveableRefType<Element>)[];
    elementSnapDirections?: boolean | SnapDirections;
    firstRenderState?: null | MoveableManagerState<{}>;
    flushSync?: ((callback) => void);
    getScrollPosition?: ((e) => number[]);
    groupable?: boolean;
    groupableProps?: Record<string, any>;
    hideChildMoveableDefaultLines?: boolean;
    hideDefaultLines?: boolean;
    hideThrottleDragRotateLine?: boolean;
    horizontalGuidelines?: (string | number | PosGuideline)[];
    individualGroupable?: boolean;
    individualGroupableProps?: ((element, index) => undefined | null | void | Record<string, any>);
    innerBounds?: null | InnerBoundType;
    isDisplayGridGuidelines?: boolean;
    isDisplayInnerSnapDigit?: boolean;
    isDisplayShadowRoundControls?: boolean | "horizontal";
    isDisplaySnapDigit?: boolean;
    keepRatio?: boolean;
    keepRatioFinally?: boolean;
    linePadding?: number;
    maxRoundControls?: number[];
    maxSnapElementGapDistance?: number;
    maxSnapElementGuidelineDistance?: number;
    minRoundControls?: number[];
    origin?: boolean;
    originDraggable?: boolean;
    originRelative?: boolean;
    padding?: number | PaddingBox;
    passDragArea?: boolean;
    persistData?: null | PersistRectData;
    pinchOutside?: boolean;
    pinchThreshold?: number;
    pinchable?: boolean | ("resizable" | "scalable" | "rotatable")[];
    preventClickDefault?: boolean;
    preventClickEventOnDrag?: boolean;
    preventDefault?: boolean;
    preventRightClick?: boolean;
    preventWheelClick?: boolean;
    props?: Record<string, any>;
    renderDirections?: boolean | string[];
    requestStyles?: string[];
    resizable?: boolean | ResizableOptions;
    resizeFormat?: ((size) => number[]);
    resolveAblesWithRotatable?: null | Record<string, LineDirection[]>;
    rootContainer?: MoveableRefType<HTMLElement>;
    rotatable?: boolean | RotatableOptions;
    rotateAroundControls?: boolean;
    rotationPosition?: RotationPosition | RotationPosition[];
    rotationTarget?: false | MoveableRefType<HTMLElement | SVGElement> | ArrayFormat<MoveableRefType<HTMLElement | SVGElement>>;
    roundClickable?: boolean | "line" | "control";
    roundPadding?: number;
    roundRelative?: boolean;
    roundable?: boolean;
    scalable?: boolean | ScalableOptions;
    scrollContainer?: MoveableRefType<HTMLElement>;
    scrollOptions?: null | Partial<DragScrollOptions>;
    scrollThreshold?: number;
    scrollThrottleTime?: number;
    scrollable?: boolean;
    snapContainer?: MoveableRefType<HTMLElement | SVGElement>;
    snapDigit?: number;
    snapDirections?: boolean | SnapDirections;
    snapDistFormat?: ((distance, type) => string | number);
    snapGap?: boolean;
    snapGridAll?: boolean;
    snapGridHeight?: number;
    snapGridWidth?: number;
    snapHorizontalThreshold?: number;
    snapRenderThreshold?: number;
    snapRotationDegrees?: number[];
    snapRotationThreshold?: number;
    snapThreshold?: number;
    snapVerticalThreshold?: number;
    snappable?: boolean | string[];
    startDragRotate?: number;
    stopPropagation?: boolean;
    svgOrigin?: string;
    target?: MoveableRefTargetType;
    targetGroups?: MoveableTargetGroupsType;
    throttleDrag?: number;
    throttleDragRotate?: number;
    throttleResize?: number;
    throttleRotate?: number;
    throttleScale?: number;
    transformOrigin?: string | (string | number)[];
    translateZ?: string | number;
    triggerAblesSimultaneously?: boolean;
    useAccuratePosition?: boolean;
    useDefaultGroupRotate?: boolean;
    useMutationObserver?: boolean;
    useResizeObserver?: boolean;
    verticalGuidelines?: (string | number | PosGuideline)[];
    viewContainer?: MoveableRefType<HTMLElement>;
    warpSelf?: boolean;
    warpable?: boolean;
    zoom?: number;
}

Hierarchy

  • MoveableOptions
    • CbnMoveableOptions

Properties

ables? bounds? checkInput? checkResizableError? className? clickable? clipArea? clipHorizontalGuidelines? clipRelative? clipSnapThreshold? clipTargetBounds? clipVerticalGuidelines? clippable? container? controlPadding? cspNonce? customClipPath? defaultClipPath? defaultGroupOrigin? defaultGroupRotate? displayAroundControls? dragArea? dragContainer? dragFocusedInput? dragTarget? dragTargetSelf? dragWithClip? draggable? edge? edgeDraggable? elementGuidelines? elementSnapDirections? firstRenderState? flushSync? getScrollPosition? groupable? groupableProps? hideChildMoveableDefaultLines? hideDefaultLines? hideThrottleDragRotateLine? horizontalGuidelines? individualGroupable? individualGroupableProps? innerBounds? isDisplayGridGuidelines? isDisplayInnerSnapDigit? isDisplayShadowRoundControls? isDisplaySnapDigit? keepRatio? keepRatioFinally? linePadding? maxRoundControls? maxSnapElementGapDistance? maxSnapElementGuidelineDistance? minRoundControls? origin? originDraggable? originRelative? padding? passDragArea? persistData? pinchOutside? pinchThreshold? pinchable? preventClickDefault? preventClickEventOnDrag? preventDefault? preventRightClick? preventWheelClick? props? renderDirections? requestStyles? resizable? resizeFormat? resolveAblesWithRotatable? rootContainer? rotatable? rotateAroundControls? rotationPosition? rotationTarget? roundClickable? roundPadding? roundRelative? roundable? scalable? scrollContainer? scrollOptions? scrollThreshold? scrollThrottleTime? scrollable? snapContainer? snapDigit? snapDirections? snapDistFormat? snapGap? snapGridAll? snapGridHeight? snapGridWidth? snapHorizontalThreshold? snapRenderThreshold? snapRotationDegrees? snapRotationThreshold? snapThreshold? snapVerticalThreshold? snappable? startDragRotate? stopPropagation? svgOrigin? target? targetGroups? throttleDrag? throttleDragRotate? throttleResize? throttleRotate? throttleScale? transformOrigin? translateZ? triggerAblesSimultaneously? useAccuratePosition? useDefaultGroupRotate? useMutationObserver? useResizeObserver? verticalGuidelines? viewContainer? warpSelf? warpable? zoom?

Properties

Optional ables

ables?: Able<IObject<any>, IObject<any>>[]

You can add your custom able.

Default

[]

Optional bounds

bounds?: null | BoundType

You can set up boundaries.

Default

null

Optional checkInput

checkInput?: boolean

Checks whether this is an element to input text or contentEditable, and prevents dragging.

Default

false

Optional checkResizableError

checkResizableError?: boolean

Whether to recalculate when the size to be calculated is different from the actual size

Default

true

Optional className

className?: string

You can specify the className of the moveable controlbox.

Default

""

Optional clickable

clickable?: boolean

Whether to trigger the moveable's click event.

Default

true

Optional clipArea

clipArea?: boolean

You can drag the clip by setting clipArea.

Default

false

Optional clipHorizontalGuidelines

clipHorizontalGuidelines?: (string | number)[]

Add clip guidelines in the horizontal direction.

Default

[]

Optional clipRelative

clipRelative?: boolean

% Can be used instead of the absolute px (rect not possible)

Default

false

Optional clipSnapThreshold

clipSnapThreshold?: number

Distance value that can snap to clip guidelines.

Default

5

Optional clipTargetBounds

clipTargetBounds?: boolean

Whether the clip is bound to the target.

Default

false

Optional clipVerticalGuidelines

clipVerticalGuidelines?: (string | number)[]

Add clip guidelines in the vertical direction.

Default

[]

Optional clippable

clippable?: boolean | ClippableOptions

Whether to clip the target.

Default

false

Optional container

container?: null | HTMLElement | SVGElement

A container into which Moveables are inserted. Set it only when used within the slot of Web Components or when the container is different.

Default

parentElement

Optional controlPadding

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.

Since

0.44.0

Story

options--options-control-padding

Default

0

Optional cspNonce

cspNonce?: string

add nonce property to style for CSP.

Deprecated

Default

""

Optional customClipPath

customClipPath?: string

You can force the custom clipPath. (defaultClipPath < style < customClipPath < dragging clipPath)

Optional defaultClipPath

defaultClipPath?: string

If clippath is not set, the default value can be set. (defaultClipPath < style < customClipPath < dragging clipPath)

Optional defaultGroupOrigin

defaultGroupOrigin?: string

Sets the initial transform origin of the group.

Default

"50% 50%"

Optional defaultGroupRotate

defaultGroupRotate?: number

Sets the initial rotation of the group.

Default

0

Optional displayAroundControls

displayAroundControls?: boolean

You can expand the area around the control. Either rotateAroundControls or displayAroundControls can be used. You can set the area through the controlPadding value.

Since

0.44.0

Story

options--options-control-padding

Default

false

Optional dragArea

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.

Default

if group, true, else fals

Optional dragContainer

dragContainer?: Window | MoveableRefType<HTMLElement>

Container area where drag works

Default

window

Optional dragFocusedInput

dragFocusedInput?: boolean

Whether to drag the focused input If checkInput is true, this option is not applied.

Since

0.47.0

Story

options--options-drag-focused-input

Default

false

Optional dragTarget

dragTarget?: MoveableRefType<HTMLElement | SVGElement>

The external target(s) to drag Moveable target(s)

Default

target

Optional dragTargetSelf

dragTargetSelf?: boolean

If dragTarget is set directly, taget itself cannot be dragged. Whether to drag the target as well.

Default

false

Optional dragWithClip

dragWithClip?: boolean

When dragging the target, the clip also moves.

Default

true

Optional draggable

draggable?: boolean

Whether or not target can be dragged.

Default

false

Optional edge

edge?: boolean | LineDirection[]

Whether to scale and resize through edge lines. You can use "n", "w", "s", "e" in LineDirection array.

Default

false

Optional edgeDraggable

edgeDraggable?: boolean | LineDirection[]

Whether to move by dragging the edge line

Default

false

Optional elementGuidelines

elementGuidelines?: (ElementGuidelineValueOption | MoveableRefType<Element>)[]

Add guidelines for the element.

Default

[]

Optional elementSnapDirections

elementSnapDirections?: boolean | SnapDirections

You can specify the snap directions of elements.

Default

true (true is all directions)

Optional Private firstRenderState

firstRenderState?: null | MoveableManagerState<{}>

single => group로 변환과정에 도형 유지를 위한 첫 렌더링 state

Optional flushSync

flushSync?: ((callback) => void)

If you are using React 18's concurrent mode, use flushSync for UI sync.

Type declaration

    • (callback): void

    • Parameters

      • callback: (() => void)
          • (): void

          • Returns void

      Returns void

Default

empty function

Example

import { flushSync } from "react-dom";

<Moveable flushSync={flushSync} />

Optional getScrollPosition

getScrollPosition?: ((e) => number[])

Sets a function to get the scroll position.

Type declaration

    • (e): number[]

    • Parameters

      • e: {
            direction: number[];
            scrollContainer: HTMLElement;
        }
        • direction: number[]
        • scrollContainer: HTMLElement

      Returns number[]

Deprecated

Default

scrollContainer's scrollTop, scrollLeft

Optional Private groupable

groupable?: boolean

Optional groupableProps

groupableProps?: Record<string, any>

Props that work when group

Example

{
    roundable: true,
    groupableProps: {
        roundable: false,
    },
}

Optional hideChildMoveableDefaultLines

hideChildMoveableDefaultLines?: boolean

Whether to hide the line in child moveable for group corresponding to the rect of the target.

Default

false

Optional hideDefaultLines

hideDefaultLines?: boolean

Whether to hide the line corresponding to the rect of the target.

Default

false

Optional hideThrottleDragRotateLine

hideThrottleDragRotateLine?: boolean

Hides the guidelines that appear when using the throttleDragRotate prop.

Default

false

Optional horizontalGuidelines

horizontalGuidelines?: (string | number | PosGuideline)[]

Add guidelines in the horizontal direction.

Default

[]

Optional individualGroupable

individualGroupable?: boolean

Create targets individually, not as a group.

Story

individual-group--individual-group-draggable-scalable-rotatable

Optional individualGroupableProps

individualGroupableProps?: ((element, index) => undefined | null | void | Record<string, any>)

When using individualGroupable you can pass props to child moveable.

Type declaration

    • (element, index): undefined | null | void | Record<string, any>

    • Parameters

      • element: undefined | null | HTMLElement | SVGElement
      • index: number

      Returns undefined | null | void | Record<string, any>

Story

individual-group--individual-group-groupable-props

Since

0.44.0

Optional innerBounds

innerBounds?: null | InnerBoundType

You can set up inner boundaries.

Default

null

Optional isDisplayGridGuidelines

isDisplayGridGuidelines?: boolean

Whether to show guideline of snap by grid

Default

false

Optional isDisplayInnerSnapDigit

isDisplayInnerSnapDigit?: boolean

Whether to show element inner snap distance

Default

false

Optional isDisplayShadowRoundControls

isDisplayShadowRoundControls?: boolean | "horizontal"

Whether to show a round control that does not actually exist as a shadow

Default

false

Optional isDisplaySnapDigit

isDisplaySnapDigit?: boolean

Whether to show snap distance.

Default

true

Optional keepRatio

keepRatio?: boolean

When resize or scale, keeps a ratio of the width, height.

Default

false

Optional keepRatioFinally

keepRatioFinally?: boolean

The size can be changed by format and throttle, but the ratio is maintained at the end. Forced true when using groups.

Default

false

Optional linePadding

linePadding?: number

By adding padding to the line, you can increase the area of the line that can be clicked and dragged.

Since

0.43.0

Story

options--options-line-padding

Default

0

Optional maxRoundControls

maxRoundControls?: number[]

Maximum number of round controls. It moves in proportion by control. [horizontal, vertical]

Default

[4, 4]

Optional maxSnapElementGapDistance

maxSnapElementGapDistance?: number

Maximum distance to which element gap guidelines can be snapped.

Default

Infinity

Optional maxSnapElementGuidelineDistance

maxSnapElementGuidelineDistance?: number

Maximum distance to which element guidelines can be snapped.

Default

Infinity

Optional minRoundControls

minRoundControls?: number[]

Minimum number of round controls. It moves in proportion by control. [horizontal, vertical]

Default

[0, 0]

Optional origin

origin?: boolean

Whether or not the origin control box will be visible or not.

Default

true

Optional originDraggable

originDraggable?: boolean

Whether to drag origin.

Default

false

Optional originRelative

originRelative?: boolean

% Can be used instead of the absolute px.

Default

true

Optional padding

padding?: number | PaddingBox

Add padding around the target to increase the drag area.

Default

null

Optional passDragArea

passDragArea?: boolean

Set pointerEvents: none; css to pass events in dragArea.

Default

false

Optional persistData

persistData?: null | PersistRectData

Data for first render

Default

null

Optional pinchOutside

pinchOutside?: boolean

Whether the container containing the target becomes a pinch.

Default

true

Optional pinchThreshold

pinchThreshold?: number

Minimum distance to pinch.

Default

20

Optional pinchable

pinchable?: boolean | ("resizable" | "scalable" | "rotatable")[]

Whether or not target can be pinched with draggable, resizable, scalable, rotatable.

Default

false

Optional preventClickDefault

preventClickDefault?: boolean

Prevent click event on dragStart. (mousedown, touchstart)

Default

false

Optional preventClickEventOnDrag

preventClickEventOnDrag?: boolean

Prevent click event on drag. (mousemove, touchmove)

Default

true

Optional preventDefault

preventDefault?: boolean

Whether to call preventDefault on touchstart or mousedown

Since

0.44.0

Default

true

Optional preventRightClick

preventRightClick?: boolean

Whether to prevent dragging using the right mouse button

Default

true

Optional preventWheelClick

preventWheelClick?: boolean

Whether to prevent dragging using the wheel (middle) mouse button

Default

true

Optional props

props?: Record<string, any>

You can use props in object format or custom props.

Default

empty object

Optional renderDirections

renderDirections?: boolean | string[]

Set directions to show the control box.

Default

false if rotatable, ["n", "nw", "ne", "s", "se", "sw", "e", "w"] otherwise

Optional Private requestStyles

requestStyles?: string[]

Optional resizable

resizable?: boolean | ResizableOptions

Whether or not target can be resized.

Default

false

Optional resizeFormat

resizeFormat?: ((size) => number[])

Function to convert size for resize.

Type declaration

    • (size): number[]

    • Parameters

      • size: number[]

      Returns number[]

Default

oneself

Optional resolveAblesWithRotatable

resolveAblesWithRotatable?: null | Record<string, LineDirection[]>

Sets the control that will cause resize along with rotate. (Only Single Target, Only resizable, Beta)

Default

null

Optional rootContainer

rootContainer?: MoveableRefType<HTMLElement>

Moveable Root Container (No Transformed Container)

Default

parentElement

Story

options--options-root-container

Optional rotatable

rotatable?: boolean | RotatableOptions

Whether or not target can be rotated.

Default

false

Optional rotateAroundControls

rotateAroundControls?: boolean

You can rotate around direction controls. Either rotateAroundControls or displayAroundControls can be used.

Default

0

Optional rotationPosition

rotationPosition?: RotationPosition | RotationPosition[]

You can specify the position of the rotation.

Default

"top"

Optional rotationTarget

rotationTarget?: false | MoveableRefType<HTMLElement | SVGElement> | ArrayFormat<MoveableRefType<HTMLElement | SVGElement>>

Set additional rotationTargets.

Default

null

Optional roundClickable

roundClickable?: boolean | "line" | "control"

Whether you can add/delete round controls by double-clicking a line or control.

Default

true

Optional roundPadding

roundPadding?: number

The padding value of the position of the round control

Default

0

Optional roundRelative

roundRelative?: boolean

% Can be used instead of the absolute px

Default

false

Optional roundable

roundable?: boolean

Whether to show and drag border-radius.

Default

false

Optional scalable

scalable?: boolean | ScalableOptions

Whether or not target can be scaled.

Default

false

Optional scrollContainer

scrollContainer?: MoveableRefType<HTMLElement>

The container to which scroll is applied

Deprecated

Default

container

Optional scrollOptions

scrollOptions?: null | Partial<DragScrollOptions>

Option to scroll with dragging

Since

0.43.0

Story

support-scroll--scrolling-scrollable

Example

const scrollOptions = {
    container: () => viewer.getContainer(),
    threshold: 20,
    getScrollPosition: () => {
        return [
            viewer.getScrollLeft({ absolute: true }),
            viewer.getScrollTop({ absolute: true }),
        ];
    },
};

Optional scrollThreshold

scrollThreshold?: number

Expand the range of the scroll check area.

Deprecated

Default

0

Optional scrollThrottleTime

scrollThrottleTime?: number

Time interval that occurs when scrolling occurs when dragging is maintained If set to 0, it does not occur.

Deprecated

Default

0

Optional scrollable

scrollable?: boolean

Whether or not target can be scrolled to the scroll container

Default

false

Optional snapContainer

snapContainer?: MoveableRefType<HTMLElement | SVGElement>

A snap container that is the basis for snap, bounds, and innerBounds.

Default

null

Optional snapDigit

snapDigit?: number

snap distance digits.

Default

0

Optional snapDirections

snapDirections?: boolean | SnapDirections

You can specify the directions to snap to the target.

Default

true (true is all directions)

Optional snapDistFormat

snapDistFormat?: ((distance, type) => string | number)

You can set the text format of the distance shown in the guidelines.

Type declaration

    • (distance, type): string | number

    • Parameters

      • distance: number
      • type: "horizontal" | "vertical"

      Returns string | number

Default

oneself

Optional snapGap

snapGap?: boolean

When you drag, make the gap snap in the element guidelines.

Default

true

Optional snapGridAll

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.

Default

false

Optional snapGridHeight

snapGridHeight?: number

If height size is greater than 0, you can horizontal snap to the grid.

Default

0 (0 is not used)

Optional snapGridWidth

snapGridWidth?: number

If width size is greater than 0, you can vertical snap to the grid.

Default

0 (0 is not used)

Optional snapHorizontalThreshold

snapHorizontalThreshold?: number

Distance horizontal between horizontal value that can snap to guidelines.

Default

5

Optional snapRenderThreshold

snapRenderThreshold?: number

Distance value that render snapped guidelines.

Default

1

Optional snapRotationDegrees

snapRotationDegrees?: number[]

degree angles to snap to rotation

Default

[]

Optional snapRotationThreshold

snapRotationThreshold?: number

Snap works if abs(current rotation - snapRotationDegrees) < snapRotationThreshold.

Default

5

Optional snapThreshold

snapThreshold?: number

/**

  • Distance value that can snap to guidelines.
  • Use snapHorizontalThreshold and snapVerticalThreshold

Default

0
 *

Depreacted

Optional snapVerticalThreshold

snapVerticalThreshold?: number

Distance Horizontal value that can snap to guidelines.

Default

5

Optional snappable

snappable?: boolean | string[]

Whether or not target can be snapped to the guideline.

Default

false

Optional startDragRotate

startDragRotate?: number

start angle(degree) of x,y for throttleDragRotate when drag.

Default

0

Optional stopPropagation

stopPropagation?: boolean

Whether to prevent bubbling of events like mousedown, touchstart, etc.

Default

false

Optional svgOrigin

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.

Since

0.47.0

Default

""

Optional target

target?: MoveableRefTargetType

Optional targetGroups

targetGroups?: MoveableTargetGroupsType

Default

Optional throttleDrag

throttleDrag?: number

throttle of x, y when drag.

Default

0

Optional throttleDragRotate

throttleDragRotate?: number

throttle of angle(degree) of x,y when drag.

Default

0

Optional throttleResize

throttleResize?: number

throttle of width, height when resize.

Default

1

Optional throttleRotate

throttleRotate?: number

throttle of angle(degree) when rotate.

Default

0

Optional throttleScale

throttleScale?: number

throttle of scaleX, scaleY when scale.

Default

0

Optional transformOrigin

transformOrigin?: string | (string | number)[]

The default transformOrigin of the target can be set in advance.

Default

""

Optional translateZ

translateZ?: string | number

You can set the translateZ value of moveable.

Default

50

Optional triggerAblesSimultaneously

triggerAblesSimultaneously?: boolean

Lets generate events of ables at the same time. (like Resizable, Scalable)

Default

false

Optional useAccuratePosition

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.

Default

false

Optional useDefaultGroupRotate

useDefaultGroupRotate?: boolean

Use the defaultGroupRotate even if the children's rotations match.

Default

false

Optional useMutationObserver

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.

Default

false

Story

options--options-mutation-observer

Optional useResizeObserver

useResizeObserver?: boolean

Whether the target size is detected and updated whenever it changes. It is more effective when used together with useMutationObserver.

Default

false

Story

options--options-resize-observer

Optional verticalGuidelines

verticalGuidelines?: (string | number | PosGuideline)[]

Add guidelines in the vertical direction.

Default

[]

Optional viewContainer

viewContainer?: MoveableRefType<HTMLElement>

If you want to set the dragging information to the viewer, refer to the following.

Default

null

Story

options--options-view-container

Optional Private warpSelf

warpSelf?: boolean

Whether to warp itself to the container itself. Don't set it.

Default

false

Optional warpable

warpable?: boolean

Whether or not target can be warped.

Default

false

Optional zoom

zoom?: number

Zooms in the elements of a moveable.

Default

1

Settings

Member Visibility

Theme

On This Page

ablesboundscheckInputcheckResizableErrorclassNameclickableclipAreaclipHorizontalGuidelinesclipRelativeclipSnapThresholdclipTargetBoundsclipVerticalGuidelinesclippablecontainercontrolPaddingcspNoncecustomClipPathdefaultClipPathdefaultGroupOrigindefaultGroupRotatedisplayAroundControlsdragAreadragContainerdragFocusedInputdragTargetdragTargetSelfdragWithClipdraggableedgeedgeDraggableelementGuidelineselementSnapDirectionsfirstRenderStateflushSyncgetScrollPositiongroupablegroupablePropshideChildMoveableDefaultLineshideDefaultLineshideThrottleDragRotateLinehorizontalGuidelinesindividualGroupableindividualGroupablePropsinnerBoundsisDisplayGridGuidelinesisDisplayInnerSnapDigitisDisplayShadowRoundControlsisDisplaySnapDigitkeepRatiokeepRatioFinallylinePaddingmaxRoundControlsmaxSnapElementGapDistancemaxSnapElementGuidelineDistanceminRoundControlsoriginoriginDraggableoriginRelativepaddingpassDragAreapersistDatapinchOutsidepinchThresholdpinchablepreventClickDefaultpreventClickEventOnDragpreventDefaultpreventRightClickpreventWheelClickpropsrenderDirectionsrequestStylesresizableresizeFormatresolveAblesWithRotatablerootContainerrotatablerotateAroundControlsrotationPositionrotationTargetroundClickableroundPaddingroundRelativeroundablescalablescrollContainerscrollOptionsscrollThresholdscrollThrottleTimescrollablesnapContainersnapDigitsnapDirectionssnapDistFormatsnapGapsnapGridAllsnapGridHeightsnapGridWidthsnapHorizontalThresholdsnapRenderThresholdsnapRotationDegreessnapRotationThresholdsnapThresholdsnapVerticalThresholdsnappablestartDragRotatestopPropagationsvgOrigintargettargetGroupsthrottleDragthrottleDragRotatethrottleResizethrottleRotatethrottleScaletransformOrigintranslateZtriggerAblesSimultaneouslyuseAccuratePositionuseDefaultGroupRotateuseMutationObserveruseResizeObserververticalGuidelinesviewContainerwarpSelfwarpablezoom