微信小程序之視圖容器movable-view實現拖拽功能

• 本文簡單使用視圖容器movable-area和movable-view實現了簡單的拖拽功能。
• 參考文檔：
  movable-area
  movable-view

實現效果：

代碼：

1. wxml

    <movable-area class="movable-area">
      <!-- 可以任意拖拽 -->
      <movable-view class="movable-view"
                    direction="all"
                    scale="true">
        <image class="movable-img" src="/images/aixin-red.png" bindtap="onRed"></image>
      </movable-view>
      <!-- 只能垂直拖拽 -->
      <movable-view class="movable-view aixin-blue"
                    direction="vertical"
                    scale="true">
        <image class="movable-img" src="/images/aixin-blue.png" bindtap="onBlue"></image>
      </movable-view>
    </movable-area>

2. wxss

    page{
      height: 100%;
    }
    .movable-area{
      height:100%;
      width: 100%;
      background: pink;
    }
    .movable-view{
      width: 100rpx;
      height: 100rpx;
    }
    .aixin-blue{
      margin-top:200rpx;
    }
    .movable-img{
      width: 100rpx;
      height: 100rpx;
    }

3. javascript

    Page({
      data: {
      },
      //點擊紅色愛心響應事件
      onRed(){
        wx.showToast({
          title: '點擊了紅色愛心',
          icon:"none"
        })
      },
      //點擊藍色愛心響應事件
      onBlue() {
        wx.showToast({
          title: '點擊了藍色愛心',
          icon: "none"
        })
      },
    })