---
name: "movable-view"
mode: "component"
versionRequirements:
  - { name: "Base Library", version: "2.10.0" }
title: "movable-view - Draggable and slidable view container"
---

## movable-view

> [VERSION] Base Library >= 2.10.0

### Description

Movable view container, used within movable-area.

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `direction` | `string` | No | `"none"` | Movement direction of movable-view. Options: all (any direction), vertical, horizontal, none (immovable) |
| `inertia` | `boolean` | No | `false` | Whether movable-view has inertia |
| `out-of-bounds` | `boolean` | No | `false` | Whether the movable-view can still move beyond the movable area |
| `x` | `number` | No | `0` | Offset along the x axis; if x is out of range, it will automatically move back into the movable range |
| `y` | `number` | No | `0` | Offset along the y axis; if y is out of range, it will automatically move back into the movable range |
| `damping` | `number` | No | `20` | Damping factor, controls the animation when x or y changes |
| `friction` | `number` | No | `2` | Friction coefficient, controls the inertia animation; the larger the value, the greater the friction |
| `disabled` | `boolean` | No | `false` | Whether disabled |
| `scale` | `boolean` | No | `false` | Whether to support pinch zoom |
| `scale-min` | `number` | No | `0.5` | Minimum zoom scale |
| `scale-max` | `number` | No | `10` | Maximum zoom scale |
| `scale-value` | `number` | No | `1` | Zoom scale, range 0.5 - 10 |
| `animation` | `boolean` | No | `true` | Whether to use animation |

#### Events

| Event | Type | Description |
| --- | --- | --- |
| `change` | `(event: MovableViewChangeEvent) => void` | Triggered during dragging |
| `scale` | `(event: MovableViewScaleEvent) => void` | Triggered during zooming |

**MovableViewChangeEvent**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"change"` | Event type |
| `detail` | `MovableViewChangeDetail` | Event data |

**MovableViewScaleEvent**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"scale"` | Event type |
| `detail` | `MovableViewScaleDetail` | Event data |

### Examples

#### Basic dragging and directional constraints

*index.tyml*

```xml
// index.tyml
<view class="section">
  <text class="title">Free drag</text>
  <movable-area class="area">
    <movable-view direction="all" x="{{0}}" y="{{0}}" class="box">All directions</movable-view>
  </movable-area>
</view>
<view class="section">
  <text class="title">Horizontal only</text>
  <movable-area class="area">
    <movable-view direction="horizontal" x="{{0}}" y="{{0}}" class="box box-green">Horizontal</movable-view>
  </movable-area>
</view>
```

*index.tyss*

```css
.section { margin-bottom: 20px; }
.title { font-size: 14px; color: #666; margin-bottom: 8px; }
.area { width: 300px; height: 200px; background-color: #f5f5f5; }
.box {
  width: 80px;
  height: 80px;
  background-color: #1890ff;
  color: #fff;
  text-align: center;
  line-height: 80px;
}
.box-green { background-color: #52c41a; }
```

*index.js*

```javascript
Page({});
```

#### Inertial bounce and scaling

*index.tyml*

```xml
// index.tyml
<view class="section">
  <text class="title">Inertia + Bounce</text>
  <movable-area class="area">
    <movable-view
      direction="all"
      inertia
      out-of-bounds
      damping="{{30}}"
      friction="{{5}}"
      x="{{50}}"
      y="{{50}}"
      animation
      bind:change="onChange"
      class="box box-orange"
    >Inertia</movable-view>
  </movable-area>
</view>
<view class="section">
  <text class="title">Two-finger zoom</text>
  <movable-area scale-area class="area">
    <movable-view
      direction="all"
      scale
      scale-min="{{0.5}}"
      scale-max="{{3}}"
      scale-value="{{1}}"
      bind:scale="onScale"
      class="box box-purple"
    >Zoom</movable-view>
  </movable-area>
</view>
```

*index.tyss*

```css
.section { margin-bottom: 20px; }
.title { font-size: 14px; color: #666; margin-bottom: 8px; }
.area { width: 300px; height: 200px; background-color: #f5f5f5; }
.box {
  width: 80px;
  height: 80px;
  color: #fff;
  text-align: center;
  line-height: 80px;
}
.box-orange { background-color: #fa8c16; }
.box-purple { background-color: #722ed1; }
```

*index.js*

```javascript
Page({
  onChange(e) {
    console.log('Position:', e.detail.x, e.detail.y, 'Source:', e.detail.source);
  },
  onScale(e) {
    console.log('Scale:', e.detail.scale);
  },
});
```


### Notes

1. `movable-view` must have `width` and `height` attributes set. The default value is `10px` if not set.
2. `movable-view` is absolutely positioned by default, with `top` and `left` set to `0px`.