在小程序中，拖拽的实现已经组件化了，可以用<movable-area>和<movable-view>这对父子标签来实现，当然也可以原生js去实现。这里切说一说我如何用这对父子标签实现的拖拽功能：
目录
一、了解<movable-area>和<movable-view>这对父子标签
二、 案例
一、了解<movable-area>和<movable-view>这对父子标签
1、movable-area标签
（1）、属性
- scale-area boolean 类型 当里面的movable-view设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个 movable-area，默认是“将缩放手势生效区域修改为整个movable-area”。
（2）、注意事项
- movable-area 必须设置width和height属性，不设置默认为10px；
- 当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；
- 当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）；
2、movable-view标签
（1）、属性
- disabled boolean 是否禁用，默认是“禁用”；
- inertia boolean movable-view是否带有惯性，默认是“带有惯性”；
- out-of-bounds boolean 是否允许movable-view超出movable-area，默认是“允许超出movable-area”；
- scale boolean 是否支持双指缩放，默认是“缩放手势生效区域是在movable-view内”；
- animation boolean 是否使用动画，默认是“支持动画”。
（2）、别的属性官网给的解释还是很好理解的：
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| direction | string | none | 否 | movable-view的移动方向，属性值有all、vertical、horizontal、none |
| x | number | 否 | 定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画 | |
| y | number | 否 | 定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画 | |
| damping | number | 20 | 否 | 阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快 |
| friction | number | 2 | 否 | 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值 |
| scale-min | number | 0.5 | 否 | 定义缩放倍数最小值 |
| scale-max | number | 10 | 否 | 定义缩放倍数最大值 |
| scale-value | number | 1 | 否 | 定义缩放倍数，取值范围为 0.5 - 10 |
| bindchange | eventhandle | 否 | 拖动过程中触发的事件，event.detail = {x, y, source} | |
| bindscale | eventhandle | 否 | 缩放过程中触发的事件，event.detail = {x, y, scale}，x和y字段在2.1.0之后支持 | |
| htouchmove | eventhandle | 否 | 初次手指触摸后移动为横向的移动时触发，如果catch此事件，则意味着touchmove事件也被catch | |
| vtouchmove | eventhandle | 否 | 初次手指触摸后移动为纵向的移动时触发，如果catch此事件，则意味着touchmove事件也被catch |
（3）、bindchange 方法返回值中的source表示：产生移动的原因。原因种类如下：
| 值 | 说明 |
|---|---|
| touch | 拖动 |
| touch-out-of-bounds | 超出移动范围 |
| out-of-bounds | 超出移动范围后的回弹 |
| friction | 惯性 |
| 空字符串 | setData |
（4）、注意事项
- movable-view 必须设置width和height属性，不设置默认为10px
- movable-view 默认为绝对定位，top和left属性为0px
二、 案例
//index.wxml <view> <movable-area class="move_w" scale-area> <movable-view class="move_b" direction="all" x="10" y="10" damping="20" friction="2" scale-min="0.5" scale-max="10" scale-value="1" inertia out-of-bounds scale animation bindchange="moveEvent"> <view class="advertisement_title">薛之谦同款</view> <view class="advertisement_content"> ...... </view> </movable-view> <view>love</view> </movable-area> </view>// index.jsPage({ data:{}, moveEvent: function(e){ console.log("让我们一起摇摆~" + JSON.stringify(e.detail)); }})控制台输出：
随着小程序的发展，不知道以后这个功能会怎样呢……
