微信小程序 ----- 按鈕拖拽

<view class="body-suspension" style="top: {{UDnumber}}px; left: {{LRnumber}}px;"
      @touchstart="touchstart"
      @touchmove="touchmove"
      @touchend="touchend">
  拖拽
</view>

data中  

LRnumber: 300,
UDnumber: 370,

onload中獲取頻幕寬高:

this.windowHeight = wx.getSystemInfoSync().windowHeight
this.windowWidth = wx.getSystemInfoSync().windowWidth

methods中:

// 點擊時的初始位置
touchstart(e) {
  this.startSeat = e.touches[0]
},
// 移動時的位置
touchmove(e) {
  let vm = this
  let endPoint = e.touches[e.touches.length - 1]
  let translateX = endPoint.clientX - vm.startSeat.clientX
  let translateY = endPoint.clientY - vm.startSeat.clientY
  this.startSeat = endPoint
  let buttonTop = this.UDnumber + translateY
  let buttonLeft = this.LRnumber + translateX
  // 判斷是移動否超出屏幕
  if ((buttonLeft + 63) >= this.windowWidth) {
    buttonLeft = this.windowWidth - 63
  }
  if (buttonLeft <= 0) {
    buttonLeft = 0
  }
  if (buttonTop <= 0) {
    buttonTop = 0
  }
  if (buttonTop + 63 >= this.windowHeight) {
    buttonTop = this.windowHeight - 63
  }
  this.UDnumber = buttonTop
  this.LRnumber = buttonLeft
  vm.$apply()
},
// 鬆開時的終末位置
touchend(e) {},