可移动的视图容器，在页面中可以拖拽滑动

官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/movable-view.html

注意：movable-area 必须设置width和height属性，不设置默认为10px

1.可以设置移动的方向：
direction：属性值有all(所有方向)、vertical(纵向)、horizontal(横向)、none(没有方向)

效果图如下，

2.index.js中：

//index.js
//获取应用实例
const app = getApp();
var isFirst = false;
var isFirstMove = true;
var x, y;

Page({
  data: {
    x: 0,
    y: 0,
    inertia: true,//movable-view是否带有惯性
    damping: 20,//阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快
    friction: 2,//摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值
  },
  //移动
  tap: function (e) {
    this.setData({
      x: 30,
      y: 30
    });
  },
  btn: function () {
    var that = this;
    if (isFirst == true) {
      isFirst = false;
      that.setData({
        inertia: true,
      })
    } else {
      isFirst = true;
      that.setData({
        inertia: false,
      })
    }
  },
  btn1: function () {
    var that = this;
    if (isFirstMove == true) {
      isFirstMove = false
      that.setData({
        oob: true,
      })
    } else {
      isFirstMove
      that.setData({
        oob: false,
      })
    }
  },

  onLoad: function () {

  },
})

3.index.wxml中：

<view class="section">
  <movable-area class="movable-area">
    <movable-view class='movable-view' x="{{x}}" y="{{y}}" direction="all" inertia='{{inertia}}' damping='{{damping}}' friction="{{friction}}" out-of-bounds="{{oob}}" animation="{{animationData}}">
    </movable-view>
  </movable-area>
  <view class='view'>移动：</view>
  <button class='btn' bindtap="tap">移动到 (30px, 30px)</button>

  <view class='view'>是否带有惯性：</view>
  <button class='btn' catchtap="btn">设置/取消带有惯性</button>
  <view class='view'>超过可移动区域后,是否还可以移动：</view>
  <button class='btn' catchtap="btn1">设置/取消还可以移动</button>
</view>

4.index.wxss中：

.btn {
  width: 100%;
  font-size: 30rpx;
  margin-top: 10rpx;
}

.view {
  margin-left: 10rpx;
  font-size: 35rpx;
  margin-top: 10rpx;
}

.movable-area {
  height: 200px;
  width: 200px;
  background-color: #5ed5d1;
}

.movable-view {
  height: 50px;
  width: 50px;
  background-color: #f1aaa6;
}

本人菜鸟一个，有什么不对的地方希望大家指出评论，大神勿喷，希望大家一起学习进步！