安卓中的拖曳实现步骤:
1.获取屏幕的宽高
2.监控触摸事件move
3.获取移动的xy方向的距离,计算图片应该偏移的距离
4.设置图片偏移
同样微信小程序也是这样的步骤
视图层:
<view class="page">
<image class="dragview" bindtouchmove="touhMoveMethod"
src="../../images/voice_image/voice_icon_speaking_bg_normal.png"
style="bottom:{{maginBottom}}px;right:{{magnRight}}px;"></image>
</view>
控制层:
Page({
data: {
maginBottom: 0,
magnRight: 0,
screenWidth: 0,
screenHeight: 0
},
onLoad: function () {
var _this = this;
//获取屏幕的宽高
wx.getSystemInfo({
success: function (res) {
// success
console.log(res)
_this.setData({
screenHeight: res.windowHeight,
screenWidth: res.windowWidth,
maginBottom: res.windowHeight - 40,
magnRight: res.windowWidth - 40
})
}
})
},
/**
* 监控移动的大小 并设置到图片上
*/
touhMoveMethod: function (e) {
var _this = this;
console.log(e);
var touchs = e.touches[0];
var pageX = touchs.pageX;
var pageY = touchs.pageY;
//防止越界
if (pageX < 0 || pageY < 0 || pageX > this.data.screenWidth - 40 || this.data.screenHeight - pageY <= 40) return;
_this.setData({
maginBottom: _this.data.screenHeight - 40 - pageY,
magnRight: _this.data.screenWidth - 40 - pageX
})
}
})