movable-view

可移动的视图容器，在页面中可以拖拽滑动。movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。

moveable-area

movable-view 的可移动区域。

bindchange返回的source表示产生移动的原因

Tips：

• movable-view 必须设置width和height属性，不设置默认为10px
• movable-view 默认为绝对定位，top和left属性为0px

示例代码：

<!--pages/component/pages/moveable-view/moveable-view.mcml-->

<view class="container">
  <view>
    <movable-area scale-area="{{scaleArea}}">
      <movable-view 
        direction="{{direction}}"
        inertia="{{inertia}}"
        out-of-bounds="{{outOfBounds}}"
        x="{{x}}" y="{{y}}"
        damping="{{damping}}"
        scale="{{scale}}"
        friction="{{friction}}"
        scale-min="{{scaleMin}}"
        scale-max="{{scaleMax}}"


        scale-value="{{scaleValue}}"
        disabled="{{disabled}}"
        animation="{{animation}}"

        bindvtouchmove="bindevent"
        bindhtouchmove="bindevent"
        bindscale="bindevent"
        bindchange="bindevent"
      ></movable-view>
      <view>
      <movable-view
        direction="all"
        x="160" y = "100"
        scale-value="1"
        scale="{{true}}"
        out-of-bounds="{{true}}"
        damping="1"
        style="width:300rpx;height:300rpx;"
        >
        <view style="width:100%;height:100%;background-color:yellow;"></view>
      </movable-view>
      </view>
    </movable-area>
  </view>

  <radio-group name="direction" bindchange="directionChanged">
    <view class="cssname">direction: 设置移动方向</view>
    <radio value="all" checked>all</radio>
    <radio value="vertical">vertical</radio>
    <radio value="horizontal">horizontal</radio>
    <radio value="none">none</radio>
  </radio-group>
  <button bindtap="setXY">移动到指定位置(x:0,y:0)</button>

  <view class="cssname">scale-area</view>
  <view class="propClass">
    <view>支持moveable-view双指缩放</view>
    <switch checked="{{scaleArea}}" bindchange="scaleAreaChanged"></switch>
  </view>
  <block mc:for="{{properties}}">
    <view class="cssname">{{item.name}}</view>
    <view class="propClass">
      <view>{{item.desc}}</view>
      <switch checked="{{item.checked}}" bindchange="propChanged" data-prop="{{item.prop}}"></switch>
    </view>
  </block>
  <view class="cssname">scale</view>
  <slider min="{{scaleMin}}" max="{{scaleMax}}" step="0.5" bindchange="scaleChanged" disabled="{{!scale}}" value="{{scaleValue}}"  show-value="{{true}}">缩放级别</slider>
  <view class="cssname">friction</view>
  <slider min="2" max="100" bindchange="frictionChanged" show-value="{{true}}" value="{{friction}}">摩擦系数</slider>
  <view class="cssname">damping</view>
  <slider min="2" max="100" bindchange="dampingChanged" show-value="{{true}}" value="{{damping}}" >阻尼系数</slider>


  <block mc:for="{{events}}">
    <view class="cssname">{{item.name + ":" + item.desc}}, 参数event.detail</view>
    <text space="nbsp" user-select="true" class="scrollDetail">{{item.detail || ''}}</text>
  </block>
</view>

// pages/component/pages/moveable-view/moveable-view.js
var _properties = [
  {"prop" : "disabled", "name" : "disabled", "desc": "是否禁用", checked: false, valueDesc: '禁用'},
  {"prop" : "inertia", "name" : "inertia", "desc": "是否带有惯性", checked: false, valueDesc: '开启'},
  {"prop" : "outOfBounds", "name" : "out-of-bounds", "desc": "超过可移动区域后可以移动", checked: false, valueDesc: '开启'},
  {"prop" : "scale", "name" : "scale", "desc": "是否支持双指缩放", checked: false, valueDesc: '开启'},
  {"prop" : "animation", "name" : "animation", "desc": "是否使用动画", checked: true, valueDesc: '开启'}
];
var _data = {
  properties: _properties
};
_properties.forEach(function (_prop) {
  _data[_prop.prop] = _prop.checked

})
Page({
  data: Object.assign({
    direction: "all",
    x: 10, y : 10,
    damping: 20,
    friction: 2,
    scaleMin: 0.5,
    scaleMax: 10,
    scaleValue: 0.5,
    scaleArea: false,
    events:[
      {"name" : "bindchange", "desc" : "拖动过程中触发"},
      {"name" : "bindscale", "desc" : "缩放过程中触发"},
      {"name" : "bindhtouchmove", "desc" : "初次手指触摸后移动为横向的移动时触发"},
      {"name" : "bindvtouchmove", "desc" : "初次手指触摸后移动为纵向的移动时触发"}
    ]
  },_data),

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  scaleAreaChanged: function (e) {
    this.setData({
      scaleArea: e.detail.value
    })
  },
  propChanged: function(e){
    var data = {};
    data[e.currentTarget.dataset.prop] = e.detail.value;
    this.setData(data);
  },
  setXY: function(){
    this.setData({
      x: 0, y:0, scaleValue: 2.5
    })
  },
  directionChanged: function(e){
    console.log(e);
    this.setData({
      direction: e.detail.value
    })
  },
  scaleChanged: function(e){
    this.setData({
      scaleValue: e.detail.value
    })
  },
  frictionChanged: function(e){
    this.setData({
      friction: e.detail.value
    })
  },
  dampingChanged: function(e){
    this.setData({
      damping: e.detail.value
    })
  },
  bindevent: function(e){
    var eventName = 'bind' + e.type;
    var index = 0;
    for(var i = 0; i < this.data.events.length; i++){
      if(this.data.events[i].name == eventName){
        index = i;
        break;
      }
    }
    var eventIndex = 'events[' + index + '].detail';
    this.setData({
      [eventIndex] : JSON.stringify(e, null, 2)
    })
  }
})

/* pages/component/pages/moveable-view/moveable-view.mcss */

movable-area{
  width:600rpx;
  height: 600rpx;
  background-color: gray;
}

movable-view{
  width: 200rpx;
  height: 200rpx;
  background-color: blue;
}