#### movable-area > 基礎庫 1.2.0 開始支持，低版本需做[兼容處理](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) `movable-view` 的可移動區域 **注意：movable-area 必須設置width和height屬性，不設置默認為10px** #### movable-view > 基礎庫 1.2.0 開始支持，低版本需做[兼容處理](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) 可移動的視圖容器，在頁面中可以拖拽滑動 | 屬性名 | 類型 | 默認值 | 說明 | | ------------- | ------- | ----- | ---------------------------------------- | | direction | String | none | movable-view的移動方向，屬性值有all、vertical、horizontal、none | | inertia | Boolean | false | movable-view是否帶有慣性 | | out-of-bounds | Boolean | false | 超過可移動區域后，movable-view是否還可以移動 | | x | Number | | 定義x軸方向的偏移，如果x的值不在可移動范圍內，會自動移動到可移動范圍；改變x的值會觸發動畫 | | y | Number | | 定義y軸方向的偏移，如果y的值不在可移動范圍內，會自動移動到可移動范圍；改變y的值會觸發動畫 | | damping | Number | 20 | 阻尼系數，用于控制x或y改變時的動畫和過界回彈的動畫，值越大移動越快 | | friction | Number | 2 | 摩擦系數，用于控制慣性滑動的動畫，值越大摩擦力越大，滑動越快停止；必須大于0，否則會被設置成默認值 | > 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/>`組件中，并且必須是直接子節點，否則不能移動。 **自定義拖拽及動畫** ```html <movable-area class="movable-area"> <movable-view class="movable-view" direction="all" inertia damping="1000" friction="5" x="{{x}}" y="{{y}}" >move me</movable-view> </movable-area> ``` ```js Page({ data: { x: 0, y: 0 } }) ``` ```css .movable-area { width: 750rpx; height: 200rpx; background-color: #000; .movable-view { width: 100rpx; height: 100rpx; background-color: #f00; } } ``` :-: