小程序 拖拽

在小程序中，拖拽的实现已经组件化了，可以用<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.js

Page({
  data:{},
  moveEvent: function(e){
    console.log("让我们一起摇摆~" + JSON.stringify(e.detail));
    
  }
})

控制台输出：

 

随着小程序的发展，不知道以后这个功能会怎样呢……