微信小程序实验图片拖拽和限制移出屏幕
wxml文件
wxcc文件
.img{
width: 120px;
height:120px;
}
.view{
position: absolute;
}
js文件
//获取应用实例
const app = getApp()
Page({
//初始化位移
data: {
left: 0,
top: 0,
},
viewTouchMove: function(e) {
//显示触点的位移x,y,即left与top
console.log("e.touches[0].clientX = " + e.touches[0].clientX)
console.log("e.touches[0].clientY = " + e.touches[0].clientY)
//注意：鼠标触点 = 图片左上角
/* 为了视觉可调整
this.setData({
left: e.touches[0].clientX - 60,
top: e.touches[0].clientY - 60
})
如此，触点在图片中间，because该图片大小为120px
*/
//获取屏幕宽高
var windowHeight = wx.getSystemInfoSync().windowHeight;
var windowWidth = wx.getSystemInfoSync().windowWidth;
//防止图片被移出屏幕 当拖拽的位移X小于0,就将其设置为0，达到图片不出屏幕的效果
if (e.touches[0].clientX < 0) {
e.touches[0].clientX = 0;
};
//这里要注意一下条件：位移X > 宽度-图片宽度
if (e.touches[0].clientX > windowWidth - 120) {
e.touches[0].clientX = windowWidth - 120;
};
//这里要注意一下条件：位移Y > 高度-图片高度
if (windowHeight - e.touches[0].clientY - 120 <= 0) {
e.touches[0].clientY = windowHeight - 120;
};
if (e.touches[0].clientY < 0) {
e.touches[0].clientY = 0;
};
//这里也注意下：位移动态改变量勿写在条件的前面
this.setData({
left: e.touches[0].clientX - 0,
top: e.touches[0].clientY - 0
})
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})