js代码
var startPoint
Page({
data: {
//按钮位置参数
buttonTop: 0,
buttonLeft: 0,
windowHeight: '',
windowWidth: '',
//角标显示数字
corner_data:0,
},
onLoad:function(){
//定义角标数字
this.setData({
corner_data:3
})
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.70,//这里定义按钮的初始位置
buttonLeft:res.windowWidth*0.70,//这里定义按钮的初始位置
})
}
})
},
//以下是按钮拖动事件
buttonStart: function (e) {
startPoint = e.touches[0]//获取拖动开始点
},
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) {
}
})
wxml代码
<view class="btn_Suspension" bindtap="btn_Suspension_click" catchtouchmove="buttonMove" bindtouchstart="buttonStart" bindtouchend="buttonEnd" style="top:{{buttonTop}}px;left:{{buttonLeft}}px;">
<image class="Suspension_logo" src="XXXXXXX.png"></image>
</view>
</view>
vue的拖拽原理也是一样的
1.监听拖拽开始事件获取初始位置
2.监听移动事件并获取x,y轴与初始位置的差
3.改变在data中的元素位置参数