基礎庫 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>注意事項
movable-view必須設定width和height屬性，不設定預設為 10 px。movable-view預設為絕對位置（請勿修改），top和left屬性為 0 px。- 當
movable-view小於movable-area時，movable-view的移動範圍是在movable-area內；當movable-view大於movable-area時，movable-view的移動範圍必須包含movable-area（X 軸方向和 Y 軸方向分開考慮）。 movable-view必須在<movable-area/>組件中，並且必須是直接子節點，否則不能移動。