简单实现小程序view拖拽功能

此代码只是简单实现了view的拖拽

方法是利用绝对定位，以及使用 catchtouchmove 事件 ，动态改变绝对定位的高度。

 

JS数据代码

 data: {
    ViewArr:[
      ['red','0rpx'],
      ['blue', '110rpx'],
      ['Pink', '220rpx'],
      ['MediumSlateBlue', '330rpx'],
      ['Lavender','440rpx'],
    ]
  },

JS move 方法

  move: function (e) {
    var that = this 
    var index = ~~e.currentTarget.dataset.index //获取拖拽的view块
    var move_view = 'ViewArr' + "[" + [index] + "][1]" 
    var top = e.touches[0].clientY + 'px' //拖拽距离顶部的位置
    that.setData({
      [move_view]: [top],
    })
  },

wxml 代码

<block wx:for="{{ViewArr}}" wx:key>
  <view class="move_view" catchtouchmove='move' catchtouchstart='start' catchtouchend='end' data-index='{{index}}' style='background:{{item[0]}};top:{{item[1]}}'></view>
</block>

wxss 代码

.move_view {
  width: 80%;
  height: 100rpx;
  position: absolute;
  left: 10%;
}