Movable view

movable-area

Movable area of movable-view.

movable-view

Draggable view container that slides within the page.

Attribute	Type	Default value	Description	Minimum version
direction	String	none	Movement direction of movable-view. Valid values: all, vertical, horizontal, none.	-
x	Number	0	X-axis offset, mapped to the left property. Out-of-range values are clamped automatically.	-
y	Number	0	Y-axis offset, mapped to the top property. Out-of-range values are clamped automatically.	-
disabled	Boolean	false	Disables the button.	-
onTouchStart	EventHandle	-	Triggered when a touch starts.	1.11.5
onTouchMove	EventHandle	-	Triggered when a touch moves.	1.11.5
onTouchEnd	EventHandle	-	Triggered when a touch ends.	1.11.5
onTouchCancel	EventHandle	-	Triggered when a touch is canceled, for example, by an incoming call or pop-up.	1.11.5
onChange	EventHandle	-	Triggered during dragging. event.detail = {x: x, y: y, source: source}. source indicates the movement cause. Value: touch (drag).	-
onChangeEnd	EventHandle	-	Triggered after dragging ends. event.detail = {x: x, y: y}	-

Code sample

<movable-area style="width: 100px;height: 100px;background-color: red;margin-left: 100px;">
  <movable-view
    onChange="onMovableViewChange"
    onChangeEnd="onMovableViewChangeEnd"
    direction="vertical"
    x="{{10}}"
    y="{{10}}"
    style="width: 40px;height: 40px;background-color: rgba(0, 0, 0, 0.5);"
  >
    <view onTap="onTapMovableView">movable-view</view>
  </movable-view>
</movable-area>

Cautions

• The width and height attributes of movable-view are required. Default: 10 px.

• movable-view uses absolute positioning by default (do not modify). top and left default to 0 px.

• When movable-view is smaller than movable-area, it moves within movable-area. When larger, movable-view must fully cover movable-area. Each axis is evaluated independently.

• movable-view must be a direct child of <movable-area/>. Otherwise, it cannot move.