movable-area

解释：movable-view 的可移动区域。

movable-area 必须设置width和height属性，不设置默认为10px。
属性名类型默认值说明
scale-areaBooleanfalse当里面的movable-view设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个movable-area 。

movable-view

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

属性说明：

属性名类型默认值说明
directionStringnonemovable-view 的移动方向，属性值有 all 、 vertical 、 horizontal 、 none
inertiaBooleanfalsemovable-view 是否带有惯性
out-of-boundsBooleanfalse超过可移动区域后，movable-view 是否还可以移动。
xNumber-定义 x 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围；改变 x 的值会触发动画。
yNumber-定义 y 轴方向的偏移，如果 y 的值不在可移动范围内，会自动移动到可移动范围；改变 y 的值会触发动画。
dampingNumber20阻尼系数，用于控制 x 或 y 改变时的动画和过界回弹的动画，值越大移动越快。
frictionNumber2摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于 0，否则会被设置成默认值。
disabledBooleanfalse是否禁用
scaleBooleanfalse是否支持双指缩放，默认缩放手势生效区域是在movable-view内。
scale-minNumber0.5定义缩放倍数最小值
scale-maxNumber10定义缩放倍数最大值
scale-valueNumber1定义缩放倍数，取值范围为 0.5 - 10 。
animationBooleantrue是否使用动画
bindchangeEventHandle拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、out-of-bounds（超出移动范围后的回弹）、inertia（惯性）和空字符串（setData）。
bindscaleEventHandle缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}

除了基本事件外，movable-view提供了两个特殊事件。

类型触发条件
htouchmove手指初次触摸后发生横向移动，如果catch此事件，则意味着touchmove事件也被catch
vtouchmove手指初次触摸后发生纵向移动，如果catch此事件，则意味着touchmove事件也被catch

说明：

  • movable-view 必须设置 width 和 height 属性，不设置默认为 10px；
  • movable-view 默认为绝对定位，top 和 left 属性为 0px；
  • 当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；
  • 当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x 轴方向和 y 轴方向分开考虑）；
  • movable-view必须在组件中，并且必须是直接子节点，否则不能移动。
    示例：在开发者工具中预览效果
  1. <view class="movable-view">
        <movable-area style="height: 300px;width: 300px;background: green;">
            <movable-view style="height: 40px; width: 40px; background: black;" x="30" y="30" direction="all">
            </movable-view>
        </movable-area>
    </view>