title: MovableView

sidebar_label: MovableView

A movable view container. It can be dragged to move on a page. The movable-view component must be included in the movable-area component. It must be a direct child node. Otherwise, the component cannot move.

Reference

Type

  1. ComponentType<MovableViewProps>

Examples

import Tabs from ‘@theme/Tabs’; import TabItem from ‘@theme/TabItem’;

tsx class App extends Components { render () { return ( <MovableArea style='height: 200px; width: 200px; background: red;'> <MovableView style='height: 50px; width: 50px; background: blue;' direction='all'>move me</MovableView> </MovableArea> ) } } html <movable-area style='height: 200px; width: 200px; background: red;'> <movable-view style='height: 50px; width: 50px; background: blue;' direction='all'>move me</movable-view> </movable-area>

MovableViewProps

Property Type Default Required Description
direction "all" | "vertical" | "horizontal" | "none" none No The moving direction of movable-view. Its values include “all”, “vertical”, “horizontal”, and “none”.
inertia boolean false No Specifies whether movable-view has inertia.
outOfBounds boolean false No Specifies whether movable-view can move after the view container is out of the movable area.
x string | number 否 Specifies the offset in the x-axis direction. If the value of x is not within the movable range, the component will automatically move to the movable range. A change to the value of x will trigger an animation.
y string | number No Specifies the offset in the y-axis direction. If the value of y is not within the movable range, the component will automatically move to the movable range. A change to the value of y will trigger an animation.
damping number 20 No The damping coefficient, which is used to control the animation triggered when the value of x or y changes and the animation that is pulled back when the component exceeds the range. The higher value leads to faster movement.
friction number 2 No The friction coefficient, which is used to control the animation that moves due to inertia. The higher value leads to higher friction and indicates that the movement stops earlier. It must be greater than 0. Otherwise it will be set to the default value.
disabled boolean false No Specifies whether to disable the component.
scale boolean false No Specifies whether to support two-finger scaling. The effective area for scaling gestures falls within the movable-view by default.
scaleMin number 0.5 No The minimum value of the scaling level.
scaleMax number 10 No The maximum value of the scaling level.
scaleValue number 1 No The scale level. Its values range from 0.5 to 10.
animation boolean true No Specifies whether to use animations.
onChange BaseEventOrigFunction<onChangeEventDeatil> No An event triggered during dragging.
onScale BaseEventOrigFunction<onScaleEventDeatil> No An event triggered during scaling.
onHTouchMove TouchEventFunction No An event triggered when the component is first touched by a finger and then moved in the horizontal direction. If this event is caught, it indicates that the touchmove event is also caught.
onVTouchMove TouchEventFunction No An event triggered when the component is first touched by a finger and then moved in the vertical direction. If this event is caught, it indicates that the touchmove event is also caught.
onDragStart No Triggered at the start of dragging
onDragEnd No Triggered at the end of dragging

Property Support

Property WeChat Mini-Program H5 React Native
MovableViewProps.direction ✔️ ✔️
MovableViewProps.inertia ✔️
MovableViewProps.outOfBounds ✔️
MovableViewProps.x ✔️ ✔️
MovableViewProps.y ✔️ ✔️
MovableViewProps.damping ✔️
MovableViewProps.friction ✔️
MovableViewProps.disabled ✔️ ✔️
MovableViewProps.scale ✔️
MovableViewProps.scaleMin ✔️
MovableViewProps.scaleMax ✔️
MovableViewProps.scaleValue ✔️
MovableViewProps.animation ✔️
MovableViewProps.onChange ✔️
MovableViewProps.onScale ✔️
MovableViewProps.onHTouchMove ✔️
MovableViewProps.onVTouchMove ✔️
MovableViewProps.onDragStart ✔️
MovableViewProps.onDragEnd ✔️

TChangeSource

Events triggered during dragging.

Param Description
touch Dragging
touch-out-of-bounds The movable range is exceeded.
out-of-bounds Pullback after the movable range is exceeded.
friction Inertia
setData

onChangeEventDeatil

Param Type Description
x number X coordinate
y number Y coordinate
source "" | "touch" | "touch-out-of-bounds" | "out-of-bounds" | "friction" Trigger events

onScaleEventDeatil

Param Type Description
x number X coordinate
y number Y coordinate
scale number Scaling number

API Support

API WeChat Mini-Program Baidu Smart-Program Alipay Mini-Program H5 React Native
MovableView ✔️ ✔️ ✔️ ✔️