MovableView
- movable-area
- movable-view
  - 示例代码
  - tips

MovableView

基础库 1.11.0 开始支持，低版本需做兼容

movable-area

movable-view的可移动区域

注意：movable-area 必须设置width和height属性，不设置默认为10px

movable-view

可移动的视图容器，在页面中可以拖拽滑动

属性名	类型	默认值	描述	最低版本
direction	String	none	movable-view的移动方向，属性值有`all`、`vertical`、`horizontal`、`none`
x	Number	0	定义x轴方向的偏移，会换算为`left`属性，如果x的值不在可移动范围内，会自动移动到可移动范围
y	Number	0	定义y轴方向的偏移，会换算为`top`属性，如果y的值不在可移动范围内，会自动移动到可移动范围
disabled	Boolean	false	是否禁用
onTouchStart	EventHandle		触摸动作开始	1.11.5
onTouchMove	EventHandle		触摸后移动	1.11.5
onTouchEnd	EventHandle		触摸动作结束	1.11.5
onTouchCancel	EventHandle		触摸动作被打断，如来电提醒，弹窗	1.11.5
onChange	EventHandle		拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）
onChangeEnd	EventHandle		拖动结束触发的事件，event.detail = {x: x, y: y}

示例代码

<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>

tips

movable-view 必须设置width和height属性，不设置默认为10px
movable-view 默认为绝对定位(请不要修改)，top和left属性为0px
当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）
movable-view必须在<movable-area/>组件中，并且必须是直接子节点，否则不能移动。

原文: https://docs.alipay.com/mini/component/movable-view