小程序实现拖拽功能

timg.jpg

小程序实现拖拽：movable-area和movable-view必须搭配使用才可以实现
1.movable-area必须设置W和H，默认为10px
2.movable-view小于movable-area时，movable-view的移动范围是在movable-area内
3.direction一共有4个属性：all、vertical、horizontal、none
4.inertia：movable-view是否带有惯性
5.out-of-bounds：超过可移动区域是否可以还移动
6.scale：是否支持双指缩放，默认缩放手势生效区域是在movable-view内
详细属性：https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html

先看图

image.png

<movable-area class="content-bg">
  <movable-view class='content-block' bindtap='add' direction="all">{{msg}}
    <image src='' class="imgStyle"></image>
  </movable-view>
</movable-area>
-------------------------------------------------
.content-bg {
  pointer-events: none;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  background: #aaa;
}

.content-bg>.content-block {
  pointer-events: auto;
  height: 50px;
  width: 50px;
  background:orangered;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
}
-------------------------------------------------
Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg:'start',
    flag:false
  },
  // 触发点击事件时执行的操作
  add(){
    var flag = [this.data.flag]
    console.log(flag)
    if(flag == 'false'){
      this.setData({
        msg:'stop',
        flag:true
      })
    }else{
      this.setData({
        msg:'start',
        flag:false
      })
    }
  },
})