All Products
Search
Document Center

Movable view

Last Updated: Feb 04, 2021

It is supported starting from the 1.11.0 basic library. For earlier versions, compatibility handling is required. For details, see About the Mini-program Basic Library.

movable-area

Movable area of 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

  1. <movable-area style="width: 100px;height: 100px;background-color: red;margin-left: 100px;">
  2. <movable-view
  3. onChange="onMovableViewChange"
  4. onChangeEnd="onMovableViewChangeEnd"
  5. direction="vertical"
  6. x="{{10}}"
  7. y="{{10}}"
  8. style="width: 40px;height: 40px;background-color: rgba(0, 0, 0, 0.5);"
  9. >
  10. <view onTap="onTapMovableView">movable-view</view>
  11. </movable-view>
  12. </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.