微信小程序拖拽view

首先来看一下效果

直接上代码

wxml

<view class="yidong" bindtap="btn_Suspension_click" catchtouchmove="buttonMove" bindtouchstart="buttonStart" bindtouchend="buttonEnd" style="top:{{buttonTop}}px;left:{{buttonLeft}}px;">
    <view class="tidongdiv" hover-class="none" hover-stop-propagation="false">会员
咨询</view>
</view>

wxss 主要就是 加了 固定定位

	.yidong {
width: 128rpx;
height: 124rpx;
background: #FA8A00;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
box-shadow: 1px 0px 1px 1px #ede7e7;
position: fixed; 
}
.tidongdiv {
width: 64rpx;
height: 88rpx;
font-size: 32rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
}

data 里面我们需要的参数

var startPoint    //放到第一行
Page({
data{
    //拖拽开始
    buttonTop: 0,
    buttonLeft: 0,
    windowHeight: '',
    windowWidth: '',
    }
    )}

wxjs onLoad 里面 确定我们的屏幕高度，宽度-还有我们拖拽盒子的初始位置

    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,
                buttonTop: res.windowHeight * 0.25, //这里定义按钮的初始位置
                buttonLeft: res.windowWidth * 0.83, //这里定义按钮的初始位置
            })
        }
    })
},

wxjs中 我们用到的方法

    buttonStart: function(e) {
    startPoint = e.touches[0] //获取拖动开始点
},

点击

    btn_Suspension_click: function() {
    //这里是点击之后将要执行的操作
},

按住开始滑动

    buttonMove: function(e) {
    var endPoint = e.touches[e.touches.length - 1] //获取拖动结束点
        //计算在X轴上拖动的距离和在Y轴上拖动的距离
    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) {

},