ウィーチャットウィジェットドラッグ可能ボタン

テキストリンク:https://blog.csdn.net/jiang18238032891/article/details/88721165
著者らはcatch touchstartを用いた.catchはクリックイベントを効果的に阻止した.
tap,touchstart,touchendのイベントトリガ順はstart→end→tapなので問題はcatch touchstartであり,catch touchend後にイベントがブロックされ,tapはキャプチャされない.bindtouchstartに変更し、bindtouchend後に問題が解決された.

+

var startPoint;
Page({
  data: {
    buttonTop: 0,
    buttonLeft: 0,
    windowHeight: '',
    windowWidth: ''
  },
  onLoad: function (options) {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        console.log(res);
        //     、  
        console.log('height=' + res.windowHeight);
        console.log('width=' + res.windowWidth);
        //   ,      px
        that.setData({
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      }
    })
  },
  buttonStart: function (e) {
    startPoint = e.touches[0]
  },
  buttonMove: function (e) {
    var endPoint = e.touches[e.touches.length - 1]
    var translateX = endPoint.clientX - startPoint.clientX
    var translateY = endPoint.clientY - startPoint.clientY
    startPoint = endPoint
    var buttonTop = this.data.buttonTop + translateY
    var buttonLeft = this.data.buttonLeft + translateX
    //          
    if (buttonLeft + 50 >= this.data.windowWidth) {
      buttonLeft = this.data.windowWidth - 50;
    }
    if (buttonLeft <= 0) {
      buttonLeft = 0;
    }
    if (buttonTop <= 0) {
      buttonTop = 0
    }
    if (buttonTop + 50 >= this.data.windowHeight) {
      buttonTop = this.data.windowHeight - 50;
    }
    this.setData({
      buttonTop: buttonTop,
      buttonLeft: buttonLeft
    })
  },
  buttonEnd: function (e) {
    //    
    // wx.showToast({
    //   title: '  ',
    // })
  },
  clicks:function(){
    wx.showToast({
      title: '  ',
    })
  }
})