Mobile Platform as a Service:Movable view

Note: The width and height attributes of movable-area must be configured. If not specified, the default value is 10px.

movable-view

Movable view container, which can be dragged to slide on the page.

Attribute	Type	Default value	Description	Minimum version
direction	String	none	Moving direction of movable-view. The value can be all, vertical, horizontal, or none.	-
x	Number	0	Offset in the X-axis direction, which is converted to the left property. If the value of X is not in the movable range, it automatically moves to the movable range.	-
y	Number	0	Offset in the Y-axis direction, which is converted to the top property. If the value of Y is not in the movable range, it automatically moves to the movable range.	-
disabled	Boolean	false	Whether to disable the button.	-
onTouchStart	EventHandle	-	Start the touch action.	1.11.5
onTouchMove	EventHandle	-	Move after the touch action.	1.11.5
onTouchEnd	EventHandle	-	End the touch action.	1.11.5
onTouchCancel	EventHandle	-	Tapping action interrupted by call reminder or pop-up window.	1.11.5
onChange	EventHandle	-	Event triggered during dragging. event.detail = {x: x, y: y, source: source}, where “source” indicates the cause of the movement. The value can be touch (drag).	-
onChangeEnd	EventHandle	-	Event triggered after dragging. 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>

Note

• The width and height attributes of movable-view must be configured. If not specified, the default value is 10 px.
• By default, movable-view uses absolute positioning (do not modify it). The values of top and left are 0 px.
• If the value of movable-view is smaller than that of movable-area, the movable area of movable-view is within movable-area. If the value of movable-view is larger than that of movable-area, the movable area of movable-view must cover movable-area. X-axis and Y-axis need to be considered separately.
• movable-view must be in the <movable-area/> component and must be a direct child node. Otherwise, it cannot move.